要设置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; 宽度:100 px; } .item { 背景:灰色; 宽度:50 px; 高度:50 px; } /* u表示效用*/ .u-gap-10 > *:not(:last-child) { margin-right: 10 px; } <div id='box' class="u-gap-10"> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

其他回答

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

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

#box {
   display: flex;
}

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

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

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现在支持所有现代浏览器(Edge/Chrome/Opera/三星互联网/Safari/Firefox)

最终,他们将把gap属性添加到flexbox中。在此之前,你可以使用CSS网格代替已经有间隙属性,只有一行。比处理边距要好。

确实有一种很好的、整洁的、只使用css的方法来做到这一点(可以认为“更好”)。

在这里发布的所有答案中,我只找到了一个成功使用calc()的答案(由Dariusz Sikorski)。但当提出:“但如果最后一行只有2项,它就失败了”时,就没有展开解。

这个解决方案解决了OP的问题,替代了负边际,解决了Dariusz的问题。

注:

本例只演示了3列布局 它使用calc()让浏览器以它想要的方式进行数学运算—— 100%/3(尽管33.3333%也可以),以及 (1em/3)*2(尽管。66em也可以)。 如果元素少于列,则使用::after填充最后一行

.flex-container { 显示:flex; justify-content:之间的空间; flex-wrap:包装; } .flex-container:{后 内容:“”; } .flex-container > .flex-container:{后 box-sizing: border-box; 宽度:calc((100%/3) - ((1em/3)*2)); } .flex-container >:n -child(n + 4) { margin-top: 1 em; } /*下面只是为了可视化项目*/ .flex-container > .flex-container:{后 字体大小:2 em; } .flex-container { margin-bottom: 4 em; } .flex容器> div { text-align:中心; background - color: # aaa级; 填充:1 em; } .flex-container:{后 边框:1px红色虚线; } <h2>示例1(2个元素)</h2> < div class = " flex-container”> < div > 1 < / div > 2 < div > < / div > < / div > <h2>示例2(3个元素)</h2> < div class = " flex-container”> < div > 1 < / div > 2 < div > < / div > < div > 3 < / div > < / div >

另见https://codepen.io/anon/pen/rqWagE

你可以使用& > * + *作为选择器来模拟一个弹性间距(对于单行):

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