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


当前回答

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

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

其他回答

更新:缝隙的flexbox现在支持所有现代浏览器(Edge/Chrome/Opera/三星互联网/Safari/Firefox)

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

在我的解决方案中使用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 >

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

您还可以查看这个示例。

从sawa的答案开始,这里有一个稍微改进的版本,允许您在没有周围边距的情况下设置项目之间的固定间距。

http://jsfiddle.net/chris00/s52wmgtq/49/

还包括Safari“-webkit-flex”版本。

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </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上玩它。