要设置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 >
你可以使用透明边框。
我在尝试构建一个灵活的网格模型时考虑过这个问题,该模型可以为旧的浏览器退回到表格+表格单元模型。在我看来,作为圆柱排水沟的Borders似乎是最合适的选择。例如,表格单元格没有边距。
e.g.
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
还要注意你需要min-width: 50px;flexbox。flex模型不会处理固定大小,除非你执行flex: none;在你想要固定的子元素上,因此被排除在“可伸缩”之外。http://jsfiddle.net/GLpUp/4/
但是所有列和flex一起:none;不再是弹性模型。
这里有一个更接近flex模型的东西:http://jsfiddle.net/GLpUp/5/
所以你可以正常使用页边距如果你不需要旧浏览器的表单元格回退。http://jsfiddle.net/GLpUp/3/
背景剪辑:填充盒;在使用背景时将是必要的,否则背景将流入透明边框区域。