我用了另一种方法。在容器上使用负边距，这需要与每个子容器相同，例如10px。 然后对每个子元素使用calc()减少每边的总边距宽度，在本例中为20px。

这里有一个例子:https://codepen.io/anon/pen/KJLZVg

这有助于响应地处理事情，因为您不需要针对特定的第n个子以保持它在包装时在容器的每一侧保持齐平。

.parent {
    padding: 0 10px;
}
.container {
    display: flex;
    margin: 0 -10px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.child {
    margin: 0 10px 25px 10px;
    flex: 0 0 calc(25% - 20px);
    height: 40px;
    background: red;
}

<div class="parent">
<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

同样使用flex: 0 0(宽度)，它有助于IE浏览器。

下面是一个使用灵活的方框完成间距的卡片UI元素网格:

我很沮丧手动间距卡操纵填充和空白与可疑的结果。下面是我发现的非常有效的CSS属性组合:

.card-container { 宽度:100%; 身高:900 px; overflow-y:滚动; max-width:继承; background - color: # ffffff; /*这里是有关flexbox的东西*/ 显示:flex; flex-direction:行; justify-content:中心; 对齐项目:flex-start; flex-wrap:包装; ｝ /* .card元素*/的补充样式 .card { 宽度:120 px; 身高:120 px; background - color: # ffeb3b; border - radius: 3 px; Margin: 20px 10px 20px 10px; ｝ <节课= " card-container " > < div class = "牌”> < / div > < div class = "牌”> < / div > < div class = "牌”> < / div > < div class = "牌”> < / div > < / >节

希望这对现在和未来的人们有所帮助。

Flexbox和css计算与多行支持

你好，下面是我的工作解决方案，所有浏览器支持flexbox。没有负边距。

小提琴演示

.flexbox { 显示:flex; flex-direction:行; flex-wrap:包装; justify-content:之间的空间; ｝ .flexbox > div { ／* 每行1/3 - 3列 10px -列之间的间距 * / box-sizing: border-box; Margin: 10px 10px 0 0; 轮廓:1px虚线红色; 宽度:calc(1/3*100% - (1 - 1/3)*10px; ｝ ／* 将最后一行列向左对齐 3n -每行3列 * / .flexbox > div:n -child(3n) { margin-right: 0; ｝ {后.flexbox:: 内容:”; flex:汽车; ｝ ／* 删除第一行的上边距 -n+3 -每行3列 * / .flexbox > div:n -child(-n+3) { margin-top: 0; ｝ < div class = " flexbox”> < div >坳< / div > < div >坳< / div > < div >坳< / div > < div >坳< / div > < div >坳< / div > < / div >

请注意，使用SASS可以使这段代码更短

更新2020. ii.11 在最后一行向左对齐的列

更新2020. ii.14 移除了最后一行的margin-bottom

Flexbox的利润率并没有下降。 Flexbox没有任何类似于表的边界间距(编辑:CSS属性差距在较新的浏览器中实现了这一角色，我可以使用吗)

因此，实现你的要求有点困难。

根据我的经验，不使用:first-child/:last-child，并且对flex-wrap:wrap不做任何修改的“最干净”的方法是在容器上设置padding:5px，在子元素上设置margin:5px。这将在每个子元素之间以及每个子元素与其父元素之间产生10px的间隙。

Demo

.upper { 保证金:30 px; 显示:flex; flex-direction:行; 宽度:300 px; 身高:80 px; 边框:1px红色实体; 填充:5 px;/* this */ ｝ .upper > div { Flex: 1台自动; 边框:1px红色实体; text-align:中心; 保证金:5 px;/*，这将导致10px的差距*/ ｝ .upper。MC /* multicol test */ { flex-direction:列; flex-wrap:包装; 宽度:200 px; 身高:200 px; } < div class = "上" > < div > 3 < br / > aaa < / div > < div > 3 < / div > < div > 3 < br / > aaa < / div > < div > 3 < br / > aaa < br / > aaa < / div > < div > 3 < / div > < div > 3 < / div > < / div > <div class="上MC "> < div > 3 < br / > aaa < / div > < div > 3 < / div > < div > 3 < br / > aaa < / div > < div > 3 < br / > aaa < br / > aaa < / div > < div > 3 < / div > < div > 3 < / div > < / div >

嗯，在我看来，关于CSS最简单的解决方案， 是在HTML中添加间隔符:

<div id='box'>
  <div class='item'></div>
  <div style='width: 5px;'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

所以，你可以用内联风格或类名来控制它。 有时候，也可以用填充来做间距。

下面是一个例子

好吧，现在你有一个缺口，所以你可以使用它，但好的ol技术仍然是不可避免的，像<div><div></div></div>包装构造独特的项目与独特的缺口(使用填充物为缺口!和ofc新的gap属性)

你可以使用透明边框。

我在尝试构建一个灵活的网格模型时考虑过这个问题，该模型可以为旧的浏览器退回到表格+表格单元模型。在我看来，作为圆柱排水沟的Borders似乎是最合适的选择。例如，表格单元格没有边距。

e.g.

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

还要注意你需要min-width: 50px;flexbox。flex模型不会处理固定大小，除非你执行flex: none;在你想要固定的子元素上，因此被排除在“可伸缩”之外。http://jsfiddle.net/GLpUp/4/ 但是所有列和flex一起:none;不再是弹性模型。 这里有一个更接近flex模型的东西:http://jsfiddle.net/GLpUp/5/

所以你可以正常使用页边距如果你不需要旧浏览器的表单元格回退。http://jsfiddle.net/GLpUp/3/

背景剪辑:填充盒;在使用背景时将是必要的，否则背景将流入透明边框区域。