CSS gap属性:

有一个新的gap CSS属性多列，flexbox和网格布局，现在工作在更新的浏览器!(参见我可以使用链接1;它是行间隙和列间隙的简写。

#box {
  display: flex;
  gap: 10px;
}

CSS行间距属性:

flexbox和grid布局的行间距CSS属性允许您在行之间创建间距。

#box {
   display: flex;
   row-gap: 10px;
}

CSS列间距属性:

用于多列、flexbox和网格布局的列间距CSS属性允许您在列之间创建间距。

#box {
  display: flex;
  column-gap: 10px;
}

例子:

#箱{ 显示:flex; flex-wrap:包装; 宽度:200 px; 背景颜色:红色; 差距:10 px; ｝ .item { 背景:灰色; 宽度:50 px; 高度:50 px; 边框:1px黑色实心; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

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

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

#box {
   display: flex;
}

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

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

一个带有-x(负)边距的伸缩容器和带有x(正)边距或填充的伸缩项都会导致预期的视觉结果:伸缩项之间只有2x的固定间距。

这似乎只是一个偏好问题，是在伸缩项上使用边距还是填充。

在这个例子中，为了保持固定的间隙，伸缩项是动态缩放的:

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}

博士tl;

$gutter: 8px;

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

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

我已经找到了一个基于一般兄弟选择器~的解决方案，并允许无限嵌套。

有关工作示例，请参阅此代码笔

基本上，在列容器中，前面有另一个子容器的每一个子容器都有上边距。同样，在每个行容器中，前面有另一个子容器的子容器都有左边距。

.box { 显示:flex; flex-grow: 1; flex-shrink: 1; ｝ .box。列{ flex-direction:行; ｝ .box.columns > .box ~。盒子{ margin-left: 5 px; ｝ .box。行{ flex-direction:列; ｝ .box.rows > .box ~。盒子{ margin-top: 5 px; ｝ <div class="box columns"> < span style=" font - family:宋体;"> < / div > <div class="box rows"> <div class="box rows"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > <div class="box columns"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > < / div > < / div > < span style=" font - family:宋体;"> < / div > < / div > < / div >

你可以使用透明边框。

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

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