要设置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 >
这种解决方案适用于所有情况,即使有多行或任意数量的元素。但是section的计数应该是一样的,你想在第一行有4个,第二行有3个,这样不行,第4个内容的空间将是空白的,容器不会填充。
我们使用display: grid;以及它的性质。
#箱{
显示:网格;
宽度:100 px;
grid-gap: 5 px;
/*项目之间的空格*/
grid-template-columns:重复(4 1 fr);
/*决定列的数量(4)和大小(1fr | 1分数|你也可以使用像素和其他值)*/
}
.item {
背景:灰色;
宽度:100%;
/* width是没有必要的,只是添加这个来理解width工作为网格模板分配空间的100%**默认宽度将是100%** */
高度:50 px;
}
< div id =“盒子”>
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< / div >
这种方法的缺点是在移动Opera Mini将不被支持,在PC上只有在IE10之后才能工作。
注意,完整的浏览器兼容性包括IE11,请使用Autoprefixer
旧的答案
不要认为它是一个旧的解决方案,如果你只想要单行元素,它仍然是最好的解决方案之一,它可以在所有浏览器上工作。
这个方法是由CSS兄弟姐妹组合使用的,所以你也可以用许多其他的方式来操作它,但如果你的组合是错误的,它也可能会导致问题。
.item+.item{
margin-left: 5px;
}
下面的代码将完成这个任务。在这种方法中,不需要给出margin: 0 -5px;到#box包装器。
为您提供一个工作示例:
#箱{
显示:flex;
宽度:100 px;
}
.item {
背景:灰色;
宽度:22 px;
高度:50 px;
}
.item + .item {
margin-left: 5 px;
}
< div id =“盒子”>
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / 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属性)
确实有一种很好的、整洁的、只使用css的方法来做到这一点(可以认为“更好”)。
在这里发布的所有答案中,我只找到了一个成功使用calc()的答案(由Dariusz Sikorski)。但当提出:“但如果最后一行只有2项,它就失败了”时,就没有展开解。
这个解决方案解决了OP的问题,替代了负边际,解决了Dariusz的问题。
注:
本例只演示了3列布局
它使用calc()让浏览器以它想要的方式进行数学运算——
100%/3(尽管33.3333%也可以),以及
(1em/3)*2(尽管。66em也可以)。
如果元素少于列,则使用::after填充最后一行
.flex-container {
显示:flex;
justify-content:之间的空间;
flex-wrap:包装;
}
.flex-container:{后
内容:“”;
}
.flex-container >
.flex-container:{后
box-sizing: border-box;
宽度:calc((100%/3) - ((1em/3)*2));
}
.flex-container >:n -child(n + 4) {
margin-top: 1 em;
}
/*下面只是为了可视化项目*/
.flex-container >
.flex-container:{后
字体大小:2 em;
}
.flex-container {
margin-bottom: 4 em;
}
.flex容器> div {
text-align:中心;
background - color: # aaa级;
填充:1 em;
}
.flex-container:{后
边框:1px红色虚线;
}
<h2>示例1(2个元素)</h2>
< div class = " flex-container”>
< div > 1 < / div >
2 < div > < / div >
< / div >
<h2>示例2(3个元素)</h2>
< div class = " flex-container”>
< div > 1 < / div >
2 < div > < / div >
< div > 3 < / div >
< / div >
另见https://codepen.io/anon/pen/rqWagE