要设置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 >


当前回答

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

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

#box {
   display: flex;
}

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

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

其他回答

为什么不这样做呢:

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

它使用相邻的兄弟选择器,为所有.item元素赋值,除了第一个元素左距。多亏了flexbox,这甚至导致了同样宽的元素。当然,这也可以通过垂直定位的元素和margin-top来实现。

:根{ ——内部: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 >

您还可以查看这个示例。

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

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

你可以用下面的方程

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

我之前遇到过同样的问题,然后偶然发现了这个问题的答案。希望对大家有所帮助,供今后参考。

长话短说,给孩子的弹性物品添加边框。 然后,您可以指定flex项之间的空白。 在代码片段中,我使用黑色来说明,如果你喜欢,你可以使用“透明”。

#箱{ 显示:flex; 宽度:100 px; /* margin: 0 -5px;*删除* / } .item { 背景:灰色; 宽度:50 px; 高度:50 px; /* margin: 0 5px;*删除* / 边框:1px纯黑色;/*添加这个*/ } .item。特殊{边距:0 10px;} < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > <div class='item special'></div> < / div >