Javascript 具有相等动态余量的表状结构中的订单div

我不是bootstrap的超级粉丝，所以我想知道如果没有它是否可能

我有6个div，我想订购2行3列。我希望每行/每列之间的间距精确。我可以通过计算做到这一点，但我想知道是否有更聪明的方法

注意.item height 50px仅用于示例，未在原始代码中设置，但它采用适合内容所需的高度

此外，如果我删除.container高度，它将弄乱水平蓝线。我真的不想依赖。集装箱高度

我认为使用一些设置高度的JS会很容易，但我宁愿跳过它，只使用.container height。谢谢

.container{
显示器：flex；
证明内容：之间的空间；
对齐内容：之间的空间；
宽度：500px；
高度：125px；
背景：蓝色；
柔性包装：包装；
}
.项目{
背景：红色；
宽度：30%；
高度：50px；
}

项目1
项目2
项目3
项目4
项目5
项目6

除非您需要完全支持IE11和13，否则您可以使用CSS网格：

显示：网格。使用以下命令创建3列布局：
grid template columns:repeat（3，1fr）将空间拆分为3个相等的列（1fr=1个分数）

然后使用“栅格间距”特性精确定义间距空间

附言：你不必使用网格卡上的类。您可以使用：
.container>div


.container{
显示：网格；
网格模板列：重复（3，1fr）；
栅隙：10px；
填充：10px；
宽度：500px；
背景：蓝色；
}
.container>div{
背景：红色；
最小高度：50px；
}

项目1
项目2
项目3
项目4
项目5
项目6
是的，您可以将
.item
绘制成两行和两条条纹，而无需使用flex指定确切的高度和宽度

首先为
.container
添加
flex-flow:wrap列
。这将按照您想要的顺序生成
.item
。对于缩进，可以使用
gap
规则

对于宽度，使用
calc（）
函数限制
.item
的伸缩宽度。就像这样：

flex: calc(100% / 3);


：根目录{
--间隙：20px；
}
.集装箱{
显示器：flex；
柔性流：包裹柱；
差距：var（--gap）；
宽度：500px；
高度：125px；
背景：蓝色；
填充：var（--间隙）；
}
.项目{
弹性：计算（100%/3）；
背景：红色；
}

项目1
项目2
项目3
项目4
项目5
项目6
us
flexbox
或
css grid
与
grid gap
结合使用，我发现您使用了grid gap。在我的示例中，它们之间的间距由display:flex和justify content:space-between计算；让它充满活力。有没有办法这样设置间隙？动态间隙是什么意思？如果你的方法是有效的，那么问题在哪里？为什么你需要解决它？我真的想摆脱。容器的高度。如果我移除它，它们会在垂直方向并排移动。同时，由于宽度和它们之间的间距是按点计算的，我没有指定。所以我想知道，如果我不指定容器的高度，我是否可以使垂直间隙等于水平间隙。不，没有JS是不行的。它应该如何工作？高度由内容计算或预设。您必须使用边距并为边距指定固定高度。所以在某一点上，你总是需要定义高度来获得一个特定的间隙高度。我看到你使用了间隙。在我的示例中，它们之间的间距由display:flex和justify content:space-between计算；让它充满活力。有没有一种方法可以这样设置间距？@kцицццццццццццццццццц。即使动态添加
项
，间距也会精确。这就是
gap
规则的美妙之处。