:根{ ——内部:20 px; ——差距:10 px;/*与gutter */相同 /* flex-flow in row ---------------------*/ ——行换行:行换行; ——row-nowrap:行nowrap; /* flex-flow in col ---------------------*/ ——col-wrap:圆柱包裹; ｝ .row { 显示:flex; flex-direction: var(——flex-row); ｝ /*额外的包装类(如果需要) -------------------------------------------*/ .nowrap { 显示:flex; flex-flow: var(——row-nowrap); ｝ .wrap { 显示:flex; flex-flow: var(——col-wrap); ｝ /*----------------------------------------*/ (类* =“上校——”){ 边框:1px实心#ccc; 保证金:var(差距); 填充:var(内部); 高度:汽车; 背景:# 333; Flex: 10自动; ｝ .col-3 { flex: 3; ｝ < div class = "行" > < div class = ' col-3 ' > < / div > < div class = ' col-3 ' > < / div > < div class = ' col-3 ' > < / div > < div class = ' col-3 ' > < / div > < / div >

您还可以查看这个示例。

使用flexbox，创建排水沟是一种痛苦，特别是当涉及到包装时。

你需要使用负边距(如问题所示):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

．.． 或更改HTML(如另一个答案所示):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

．.． 或者别的什么。

在任何情况下，你都需要一个丑陋的黑客来让它工作，因为flexbox不提供“弹性间隙”功能 (至少现在是这样)。

水槽的问题，然而，是简单和容易的CSS网格布局。

Grid规范提供了在网格项之间创建空间的属性，而忽略项和容器之间的空间。这些属性是:

grid-column-gap grid-row-gap 网格间隙(以上两个属性的简写)

最近，该规范已经更新，以符合CSS框对齐模块，它提供了一组用于所有框模型的对齐属性。属性现在是:

纵队间隔 row-gap 差距(简写)

然而，并不是所有支持grid的浏览器都支持更新的属性，所以我将在下面的演示中使用原始版本。

同样，如果项目和容器之间需要空格，容器上的填充就可以了(请参阅下面演示中的第三个示例)。

来自规范:

10.1. 排水沟:行隙、列隙、隙 属性 行间隙和列间隙属性(以及它们的间隙简写)， 当在网格容器上指定时，定义网格之间的水槽 行和网格列。它们的语法在CSS框对齐3中定义 §8箱子之间的空隙。 这些属性的效果就像受影响的网格线一样 获取厚度:两条网格线之间的网格轨迹就是空间 在代表他们的排水沟之间。

.box { 显示:inline-grid; grid-auto-rows: 50 px; Grid-template-columns:重复(4,50px); 边框:1px纯黑色; ｝ 。{ grid-column-gap: 5 px; ｝ :({ grid-column-gap: 10 px; grid-row-gap: 10 px; ｝ .three { grid-gap: 10 px; 填充:10 px; ｝ .item { 背景:浅灰色; ｝ <div class='box one'> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div > <人力资源> <div class='box two'> < 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 > <人力资源> <div class='box 3 '> < 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 >

更多信息:

浏览器对CSS网格的支持 更容易定义只应用于伸缩项之间的页边距(讨论) flexbox项目之间的间距

你可以使用透明边框。

我在尝试构建一个灵活的网格模型时考虑过这个问题，该模型可以为旧的浏览器退回到表格+表格单元模型。在我看来，作为圆柱排水沟的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/

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

你可以用下面的方程

.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 >

我发现最简单的方法就是用百分比来计算，然后让页边距来计算宽度

这意味着如果你使用你的例子，你最终会得到这样的结果

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

这意味着你的值是基于宽度的，虽然这可能对每个人都不好。

我发布了我的flexbox方法 在这里:

我拒绝的一个想法是去掉外部列的填充物，就像这样:

div:nth-child(#{$col-number}n+1) { padding-left: 0; }
div:nth-child(#{$col-number}n+#{$col-number}) { padding-left: 0; }

但是，像这里的其他海报一样，我更喜欢负边距技巧。我的小提琴也有响应任何人正在寻找一个基于sass的解决方案。我基本上使用这种方法来代替网格。

https://jsfiddle.net/x3jvfrg1/