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 >

博士tl;

$gutter: 8px;

.container {
  display: flex;
  justify-content: space-between;

  .children {
    flex: 0 0 calc(33.3333% - $gutter);
  }
}

这不是黑客。 bootstrap和它的网格也使用了同样的技术，不过，bootstrap为它的cols使用了padding而不是margin。

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}

这并不适用于所有情况，但如果你有灵活的子宽度(%)，并且知道每行有多少项，你可以通过使用n -child selector/s非常清楚地指定必要元素的边距。

这很大程度上取决于你对“更好”的定义。这种方法不需要为子元素或负元素添加额外的包装器标记——但它们都有自己的位置。

.container { align-content: flex-start; 对齐项目:伸展; background - color: # ccc; 显示:flex; Flex-flow:行换行; justify-content: flex-start; 宽度:100%; ｝ .child-item { background - color: # c00; margin-bottom: 2%; 最小高度:5 em; 宽度:32%; ｝ .child-item: nth-child (3 n - 1) { margin-left: 2%; margin-right: 2%; ｝ < div class = "容器" > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < div class = " child-item " > < / div > < / div >

你可以用下面的方程

.container { max-width: 960 px; 保证金:0自动; 填充:4rem 0; ｝ .flex { 显示:flex; 对齐项目:中心; justify-content:之间的空间; flex-wrap:包装; ｝ .flex:{后 内容:“”; max-width:钙(100% * var(——坳)/ 12 - var(差距)); 宽度:100%; ｝ @media (max-width: 960px) { .flex:{后 max-width: calc(100% * var(——colTablet) / 12 - var(——gap)); ｝ ｝ @media (max-width: 680px) { .flex:{后 max-width: calc(100% * var(——colMobile) / 12 - var(——gap)); ｝ ｝ .flex .item { max-width:钙(100% * var(——坳)/ 12 - var(差距)); 宽度:100%; ｝ @media (max-width: 960px) { .flex .item { max-width: calc(100% * var(——colTablet) / 12 - var(——gap)); margin-bottom: 1快速眼动; ｝ .flex .item:last child { margin-bottom:设置; ｝ ｝ @media (max-width: 680px) { .flex .item { max-width: calc(100% * var(——colMobile) / 12); ｝ ｝ .flex .item .card { 背景:# eee; text-align:中心; 填充:2快速眼动; ｝ <div class="flex container" style="——col: 3;——colTablet: 6;——colMobile: 12个;——差距:2%”> <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > <div class="item" style="——font - family:宋体;——colTablet: 6;——colMobile: 12个;——差距:2%”> < div class = "牌”> < h2 > Hello world < / h2 > < / div > < / div > < / div >

这种解决方案适用于所有情况，即使有多行或任意数量的元素。但是section的计数应该是一样的，你想在第一行有4个，第二行有3个，这样不行，第4个内容的空间将是空白的，容器不会填充。

我们使用display: grid;以及它的性质。

#箱{ 显示:网格; 宽度:100 px; grid-gap: 5 px; /*项目之间的空格*/ grid-template-columns:重复(4 1 fr); /*决定列的数量(4)和大小(1fr | 1分数|你也可以使用像素和其他值)*/ ｝ .item { 背景:灰色; 宽度:100%; /* width是没有必要的，只是添加这个来理解width工作为网格模板分配空间的100%**默认宽度将是100%** */ 高度:50 px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

这种方法的缺点是在移动Opera Mini将不被支持，在PC上只有在IE10之后才能工作。

注意，完整的浏览器兼容性包括IE11，请使用Autoprefixer

旧的答案 不要认为它是一个旧的解决方案，如果你只想要单行元素，它仍然是最好的解决方案之一，它可以在所有浏览器上工作。

这个方法是由CSS兄弟姐妹组合使用的，所以你也可以用许多其他的方式来操作它，但如果你的组合是错误的，它也可能会导致问题。

.item+.item{
  margin-left: 5px;
}

下面的代码将完成这个任务。在这种方法中，不需要给出margin: 0 -5px;到#box包装器。

为您提供一个工作示例:

#箱{ 显示:flex; 宽度:100 px; ｝ .item { 背景:灰色; 宽度:22 px; 高度:50 px; ｝ .item + .item { margin-left: 5 px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >