设置flexbox项之间距离的更好方法
设置flexbox项之间距离的更好方法
提问于 2013-12-17 13:35:30
为了设置flexbox项之间的最小距离，我在.item上使用margin: 0 5px，在容器上使用margin: 0 -5px。对我来说，这看起来像是一个黑客，但我找不到更好的方法来做到这一点。
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
.item {
background: gray;
width: 50px;
height: 50px;
margin: 0 5px;
}<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
回答 41
Stack Overflow用户
回答已采纳
发布于 2013-12-18 16:31:55
Flexbox没有折叠margins.
- Flexbox没有任何类似于表格的
border-spacing(编辑: CSS属性gap在较新的浏览器中履行了这一角色，在新的浏览器中，CSS
因此，要达到你所要求的目标就有点困难了。
根据我的经验，不使用:first-child/:last-child并且在flex-wrap:wrap上不需要任何修改就可以工作的最“干净”的方法是在容器上设置padding:5px，在子容器上设置margin:5px。这将在每个孩子之间以及每个孩子和他们的父母之间产生10px差距。
Demo
.upper {
margin: 30px;
display: flex;
flex-direction: row;
width: 300px;
height: 80px;
border: 1px red solid;
padding: 5px; /* this */
}
.upper > div {
flex: 1 1 auto;
border: 1px red solid;
text-align: center;
margin: 5px; /* and that, will result in a 10px gap */
}
.upper.mc /* multicol test */ {
flex-direction: column;
flex-wrap: wrap;
width: 200px;
height: 200px;
}<div class="upper">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
<div class="upper mc">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
Stack Overflow用户
发布于 2014-12-19 17:52:55
这不是黑客攻击。bootstrap和它的网格也使用了相同的技术，尽管bootstrap使用填充来代替边距。
.row {
margin:0 -15px;
}
.col-xx-xx {
padding:0 15px;
}Stack Overflow用户
发布于 2019-09-21 23:40:23
CSS gap属性：
现在有了一个用于多栏、灵活框和网格布局的新gap CSS property，它现在可以在较新的浏览器中使用！(参见Can I use link 1；link 2)。它是row-gap和column-gap的缩写。
#box {
display: flex;
flex-wrap: wrap;
width: 200px;
background-color: red;
gap: 10px;
}
.item {
background: gray;
width: 50px;
height: 50px;
border: 1px black solid;
}<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
CSS row-gap属性：
flexbox和网格布局的row-gap CSS property都允许您在行之间创建间隙。
#box {
display: flex;
row-gap: 10px;
}CSS column-gap属性：
用于多列、弹性框和网格布局的column-gap CSS property允许您在列之间创建间隙。
#box {
display: flex;
column-gap: 10px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20626685
复制相关文章
相似问题
腾讯云开发者
