Flexbox网格最后一行项目之间的错误边距

我仍在试用flexbox，但有这种情况我无法解决。Flexbox网格最后一行项目之间的错误边距

我有这样的网格

<div class="wrapper"> 
    <div class="container"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 
</div>

用下面的CSS：

.wrapper{ 
    width:100%; 
    oveflow:hidden; 
    margin: 0; 
    padding:0; 
} 
.container { 
    width:100%; 
    display: flex; 
    flex: 1; 
    flex-flow: row wrap; 
    justify-content: space-between; 
    margin: 0; 
} 
.container .item { 
    display: block; 
    margin: 0 0 30px; 
    width: 29.666%; 
}

但是，当我用这个，最后一排的项目有不同的“空间之间”他们变得比前一行中的项目。

看这张图片。这就是我得到：

试图解决这一问题，我能找到的唯一的事情就是设置项的侧缘为自动，这样

.container .item { 
    display: block; 
    margin: 0 auto 30px; 
    width: 29.666%; 
}

但现在，我有项目和容器之间的边界侧缘，这样的：

为什么会出现这种情况？

是否有解决这个问题的方法，而不是在容器div上有负侧边距？

来源

2016-03-03 bluantinoo

负利润不是解决方案。也许你可以添加一个类的第一个元素，并创建该位置;相对;左：20像素; –

无法重现。这将违反规范。 – Oriol

我修正了如何不理解。只是在样式表中删除了很多肮脏的旧CSS。我认为这只是一些导致这种奇怪行为的冲突。我会删除这个问题，这是无用的。如何做呢？ – bluantinoo

我看不出任何默认值。

我做了修改给出这样的事情可以看出和利润只能从第二行设置位的CSS代码：

.wrapper { 
 
} 
 
.container { 
 
    width: 100%; 
 
    background: #3197D3; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-between; 
 
    margin: 0; 
 
} 
 
.container .item { 
 
    display: block; 
 
    width: 29.666%; 
 
    min-height: 100px; 
 
    background: #FFFF4D; 
 
} 
 
.item:nth-child(3) ~.item { 
 
    margin-top: 30px; 
 
} 
 
/* demo purpose*/ 
 

 
.container:before { 
 
    content:'.'attr(class); 
 
    width:100%;/* will span whole line */ 
 
    padding:0.15em; 
 
    font-size:3em; 
 
    text-align:center; 
 
    color:white; 
 
    background:rgba(255,255,255,0.5); 
 
    } 
 
.container .item { 
 
    display: flex; 
 
} 
 
.item:before { 
 
    content: attr(class); 
 
    margin: auto; 
 
    color:#3197D3; 
 
    font-size:2em; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </div> 
 
</div>

来源

2016-03-03 12:33:08

我没有看到你做了同样的结果，但你的利润率看起来有点奇怪。我剥离下来到这一点：

.wrapper { 
 
    background: blue; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    margin: 0; 
 
} 
 

 
.item { 
 
    background: yellow; 
 
    height: 30px; 
 
    width: 29.666%; 
 
} 
 

 
.item:not(:nth-last-child(-n+3)) { 
 
    margin-bottom: 30px; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </div> 
 
</div>

来源

2016-03-03 12:41:35 tobiasandersen

Flexbox网格最后一行项目之间的错误边距

回答

相关问题