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上有负侧边距?
答
我看不出任何默认值。
我做了修改给出这样的事情可以看出和利润只能从第二行设置位的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>
答
我没有看到你做了同样的结果,但你的利润率看起来有点奇怪。我剥离下来到这一点:
.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>
负利润不是解决方案。也许你可以添加一个类的第一个元素,并创建该位置;相对;左:20像素; –
无法重现。这将违反规范。 – Oriol
我修正了如何不理解。只是在样式表中删除了很多肮脏的旧CSS。我认为这只是一些导致这种奇怪行为的冲突。我会删除这个问题,这是无用的。如何做呢? – bluantinoo