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


当前回答

你可以用下面的方程

.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; 宽度:100 px; } .item { 背景:灰色; 宽度:50 px; 高度:50 px; } .item + .item { margin-left: 5 px; } < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / 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 >

做到这一点的简单方法是在children div中添加margin-left和margin-right,并相应地调整margin值

<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>

css:

.a{
   display: flex;
   justify-content: center;
   background-color: black;
}

.b{
  height: 25px;
  width: 25px;
  background-color: grey;
  margin-left: 5px;
  margin-right: 5px;
}

你可以用下面的方程

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

根据#ChromeDevSummit的说法,在Firefox和基于chrome的浏览器中,Flexbox有一个gap属性的实现。

这是一个现场演示