要设置flexbox项目之间的最小距离,我使用margin: 0 5px on .item和margin: 0 -5px on container。对我来说,这似乎是一种hack,但我找不到更好的方法来做到这一点。

#箱{ 显示:flex; 宽度:100 px; Margin: 0 -5px; } .item { 背景:灰色; 宽度:50 px; 高度:50 px; 边距:0 5px; } < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >


当前回答

这是我的解决方案,它不需要在子元素上设置任何类:

.flex-inline-row {
    display: inline-flex;
    flex-direction: row;
}

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

用法:

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

除了上面给出的内联示例之外,同样的技术还可以用于普通的flex行和列,并扩展了除4px以外的间距类。

其他回答

一个带有-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;
}

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

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

#box {
   display: flex;
}

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

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

你可以用下面的方程

.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{显示:flex;宽度:230 px;轮廓:1px纯蓝色;} .item{背景:灰色;宽度:50 px;身高:100 px;} /* ----- Flexbox gap: ----- */ #box > * + * { margin-left: 10 px; } < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

如果你需要支持伸缩包装,你可以使用wrapper元素:

.flex{显示:flex;flex-wrap:包装;} .box{背景:灰色;身高:100 px;min-width: 100 px;flex:汽车;} .flex包装{轮廓:1px固体红色;} /* -----伸缩间隙10px: ----- */ .flex > * { 保证金:5 px; } .flex { 保证金:5 px; } .flex-wrapper { 宽度:400 px;/* optional */ 溢出:隐藏;/* optional */ } < div class = ' flex-wrapper ' > < div class = ' flex ' > < div class = '盒子' > < / div > < div class = '盒子' > < / div > < div class = '盒子' > < / div > < div class = '盒子' > < / div > < div class = '盒子' > < / 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/

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