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盒都还好，我想有这样的事情的网格，但最后的应彼此相邻，而不是这两者之间的空间很大。

问候，马库斯

来源

2017-03-09 Sukrams

我不认为它可以工作。在[原始文章]（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

尝试这样：

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

来源

2017-03-09 13:29:19

Flexbox justify-content：处理几个元素之间的空间

回答

相关问题