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


当前回答

博士tl;

$gutter: 8px;

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

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

其他回答

你可以用下面的方程

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

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

在这种情况下,我经常使用+运算符

#箱{ 显示: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 >

确实有一种很好的、整洁的、只使用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

我找到了一个黑客,因为我真的很需要这个。

/* grid */ .container { 显示:flex; Flex-flow:行换行; justify-content:之间的空间; } .container::在/*之后,这确保奇数元素向左,而不是*/之间的空格 .item { 内容:“”; 宽度:calc(33.3333% - 20px); margin-bottom: 40像素; } /*额外的样式-不重要*/ .item { 身高:100 px; 背景:# 787878; } < div class = "容器" > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < / div >

这是一个带有很好的伸缩增长类别的post网格。 我想你会喜欢的。 看到Codepen