我已经找到了一个基于一般兄弟选择器~的解决方案，并允许无限嵌套。

有关工作示例，请参阅此代码笔

基本上，在列容器中，前面有另一个子容器的每一个子容器都有上边距。同样，在每个行容器中，前面有另一个子容器的子容器都有左边距。

.box { 显示:flex; flex-grow: 1; flex-shrink: 1; ｝ .box。列{ flex-direction:行; ｝ .box.columns > .box ~。盒子{ margin-left: 5 px; ｝ .box。行{ flex-direction:列; ｝ .box.rows > .box ~。盒子{ margin-top: 5 px; ｝ <div class="box columns"> < span style=" font - family:宋体;"> < / div > <div class="box rows"> <div class="box rows"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > <div class="box columns"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > < / div > < / div > < span style=" font - family:宋体;"> < / 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;
}

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

为什么不这样做呢:

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

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

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上玩它。

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