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


当前回答

在我的解决方案中使用Flexbox,我为父元素(容器)使用了justify-content属性,并在项目的flex-basis属性中指定了边界。 检查下面的代码片段:

.container { 显示:flex; Flex-flow:行换行; justify-content:空间; margin-bottom: 10 px; } .item { 高度:50 px; 显示:flex; justify-content:中心; 对齐项目:中心; background - color: # 999; } .item-1-4 { 弹性基础:calc(25% - 10px); } .item-1-3 { flex- base: calc(33.33333% - 10px); } .item-1-2 { Flex-basis: calc(50% - 10px); } < div class = "容器" > <div class="item item-1-4">1</div> . <div class="item item-1-4">2</div> . <div class="item item-1-4">3</div> . <div class="item item-1-4">4</div> . < / div > < div class = "容器" > <div class="item item-1-3">1</div> . <div class="item item-1-3">2</div> . <div class="item item-1-3">3</div> . < / div > < div class = "容器" > <div class="item item-1-2">1</div> . <div class="item item-1-2">2</div> < / div >

其他回答

Columnify -一个包含N列的单独类

Flexbox和SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

Flexbox和CSS

.columnify { 显示:flex; } .columnify > * { flex: 1; } .columnify > *:not(:第一个孩子){ margin-left: 2快速眼动; } < div class = " columnify”> < span style=" font - family:宋体;高度:20 px;背景颜色:蓝色;" > < / div > < span style=" font - family:宋体;高度:20 px;背景颜色:蓝色" > < / div > < span style=" font - family:宋体;高度:20 px;背景颜色:蓝色" > < / div > < / div >

在JSFiddle上玩它。

嗯,在我看来,关于CSS最简单的解决方案, 是在HTML中添加间隔符:

<div id='box'>
  <div class='item'></div>
  <div style='width: 5px;'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

所以,你可以用内联风格或类名来控制它。 有时候,也可以用填充来做间距。

下面是一个例子

好吧,现在你有一个缺口,所以你可以使用它,但好的ol技术仍然是不可避免的,像<div><div></div></div>包装构造独特的项目与独特的缺口(使用填充物为缺口!和ofc新的gap属性)

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

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

#box {
   display: flex;
}

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

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

博士tl;

$gutter: 8px;

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

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

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