要设置flexbox项目之间的最小距离,我使用margin: 0 5px on .item和margin: 0 -5px on container。对我来说,这似乎是一种hack,但我找不到更好的方法来做到这一点。
#箱{
显示:flex;
宽度:100 px;
Margin: 0 -5px;
}
.item {
背景:灰色;
宽度:50 px;
高度:50 px;
边距:0 5px;
}
< div id =“盒子”>
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< / div >
比如说,如果你想在项目之间设置10px的空间,你可以为所有项目设置。item {margin-right:10px;},并在最后一个项目上重置它。item:last-child {margin-right:0;}
你也可以使用一般的sibling ~或next + sibling选择器来设置除第一个项目之外的项目的左距。item ~ .item {margin-left:10px;}或使用.item:not(:last-child) {margin-right: 10px;}
Flexbox非常聪明,它可以自动重新计算并平均分配网格。
身体{
保证金:0;
}
.container {
显示:flex;
}
.item {
flex: 1;
背景:灰色;
高度:50 px;
}
.item:没有(胎){
margin-right: 10 px;
}
< div class = "容器" >
< div class = "项目" > < / div >
< div class = "项目" > < / div >
< div class = "项目" > < / div >
< div class = "项目" > < / div >
< / div >
如果要允许使用弹性包装,请参见下面的示例。
身体{
保证金:0;
}
.container {
显示:flex;
flex-wrap:包装;
margin-left: -10 px;
}
.item {
Flex: 0 0 calc(50% - 10px);
背景:灰色;
高度:50 px;
Margin: 0 0 10px 10px;
}
< div class = "容器" >
< div class = "项目" > < / div >
< div class = "项目" > < / div >
< div class = "项目" > < / div >
< div class = "项目" > < / div >
< / div >
从sawa的答案开始,这里有一个稍微改进的版本,允许您在没有周围边距的情况下设置项目之间的固定间距。
http://jsfiddle.net/chris00/s52wmgtq/49/
还包括Safari“-webkit-flex”版本。
.outer1 {
background-color: orange;
padding: 10px;
}
.outer0 {
background-color: green;
overflow: hidden;
}
.container
{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
background-color: rgba(0, 0, 255, 0.5);
margin-left: -10px;
margin-top: -10px;
}
.item
{
flex-grow: 1;
-webkit-flex-grow: 1;
background-color: rgba(255, 0, 0, 0.5);
width: 100px;
padding: 10px;
margin-left: 10px;
margin-top: 10px;
text-align: center;
color: white;
}
<div class="outer1">
<div class="outer0">
<div class="container">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
</div>
嗯,在我看来,关于CSS最简单的解决方案,
是在HTML中添加间隔符:
<div id='box'>
<div class='item'></div>
<div style='width: 5px;'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
所以,你可以用内联风格或类名来控制它。
有时候,也可以用填充来做间距。
下面是一个例子
好吧,现在你有一个缺口,所以你可以使用它,但好的ol技术仍然是不可避免的,像<div><div></div></div>包装构造独特的项目与独特的缺口(使用填充物为缺口!和ofc新的gap属性)