Flexbox justify-content:处理几个元素之间的空间
问题描述:
有没有可能性或解决方法,当我使用flexbox和justify-content:space-between?Flexbox justify-content:处理几个元素之间的空间
这里是我的代码/演示,我的意思:
#wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#wrapper div {
width: 19%;
background: #ccc;
height: 50px;
margin-bottom: 20px;
}
<div id="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
这首10盒都还好,我想有这样的事情的网格,但最后的应彼此相邻,而不是这两者之间的空间很大。
问候, 马库斯
答
尝试这样:
#wrapper {
display: flex;
flex-wrap: wrap;
}
#wrapper div {
width: 19%;
background: #ccc;
height: 50px;
margin-bottom: 20px;
margin-left:5px;
}
<div id="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
我不认为它可以工作。在[原始文章](https://css-tricks.com/filling-space-last-row-flexbox/)中,您会注意到不使用“space-between”。添加边距,然后它将工作。在相关说明中,不要使用'background'来指定'background-color'(更多关于[here](https://csswizardry.com/2016/12/css-shorthand-syntax-considered-an-反模式/))。 –
谢谢。我会检查这个。 “问题”是我想要轻松,清洁,而不是仅仅为了边缘而做的4或5件事情,我希望Flexbox会有一个很好的解决方案;) – Sukrams