假设:

你想要4列网格布局与包装 项目的数量不一定是4的倍数

除了第1、5、9项以外，每项都设置左距;并在每个项目上设置固定宽度。如果左边的边距是10px，那么每行4个项目之间的边距是30px，项目宽度的百分比可以计算如下:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

这是一个体面的工作，涉及flexbox最后一行的问题。

.flex { 显示:flex; flex-direction:行; flex-wrap:包装; 保证金:1em 0; background - color:桃色; ｝ .item { margin-left: 10 px; 边框:1px实体; 填充:10 px; 宽度:calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4); background - color:番木瓜; ｝ .item:n -child(4n + 1) { margin-left: 0; ｝ .item:n -child(n + 5) { margin-top: 10 px; ｝ flex < div class = " " > < div class = "项目" > < / div > 1 < div class = "项目" > < / div > 2 < div class = "项目" > 3 < / div > 4 < div class = "项目" > < / div > < / div > flex < div class = " " > < div class = "项目" > < / div > 1 < div class = "项目" > < / div > 2 < div class = "项目" > 3 < / div > 4 < div class = "项目" > < / div > 5 < div class = "项目" > < / div > < div class = "项目" > < / div > 6 < / div > flex < div class = " " > < div class = "项目" > < / div > 1 < div class = "项目" > < / div > 2 < div class = "项目" > 3 < / div > 4 < div class = "项目" > < / div > 5 < div class = "项目" > < / div > < div class = "项目" > < / div > 6 < div class = "项目" > < / div > 7 < div class = "项目" > < / div > 8 < div class = "项目" > < / div > 9 < / 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>

只需在选择器中使用.item + .item来匹配第二个.item

#箱{ 显示:inline-flex; Margin: 0 -5px; ｝ .item { 背景:灰色; 宽度:10 px; 高度:50 px; ｝ #box .item + .item { margin-left: 10 px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

我发布了我的flexbox方法 在这里:

我拒绝的一个想法是去掉外部列的填充物，就像这样:

div:nth-child(#{$col-number}n+1) { padding-left: 0; }
div:nth-child(#{$col-number}n+#{$col-number}) { padding-left: 0; }

但是，像这里的其他海报一样，我更喜欢负边距技巧。我的小提琴也有响应任何人正在寻找一个基于sass的解决方案。我基本上使用这种方法来代替网格。

https://jsfiddle.net/x3jvfrg1/

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

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

#box {
   display: flex;
}

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

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

我之前遇到过同样的问题，然后偶然发现了这个问题的答案。希望对大家有所帮助，供今后参考。

长话短说，给孩子的弹性物品添加边框。 然后，您可以指定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 >