要设置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 >
Flexbox和css计算与多行支持
你好,下面是我的工作解决方案,所有浏览器支持flexbox。没有负边距。
小提琴演示
.flexbox {
显示:flex;
flex-direction:行;
flex-wrap:包装;
justify-content:之间的空间;
}
.flexbox > div {
/*
每行1/3 - 3列
10px -列之间的间距
* /
box-sizing: border-box;
Margin: 10px 10px 0 0;
轮廓:1px虚线红色;
宽度:calc(1/3*100% - (1 - 1/3)*10px;
}
/*
将最后一行列向左对齐
3n -每行3列
* /
.flexbox > div:n -child(3n) {
margin-right: 0;
}
{后.flexbox::
内容:”;
flex:汽车;
}
/*
删除第一行的上边距
-n+3 -每行3列
* /
.flexbox > div:n -child(-n+3) {
margin-top: 0;
}
< div class = " flexbox”>
< div >坳< / div >
< div >坳< / div >
< div >坳< / div >
< div >坳< / div >
< div >坳< / div >
< / div >
请注意,使用SASS可以使这段代码更短
更新2020. ii.11
在最后一行向左对齐的列
更新2020. ii.14
移除了最后一行的margin-bottom
你可以使用& > * + *作为选择器来模拟一个弹性间距(对于单行):
#box{显示:flex;宽度:230 px;轮廓:1px纯蓝色;}
.item{背景:灰色;宽度:50 px;身高:100 px;}
/* ----- Flexbox gap: ----- */
#box > * + * {
margin-left: 10 px;
}
< div id =“盒子”>
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< div class = '物品' > < / div >
< / div >
如果你需要支持伸缩包装,你可以使用wrapper元素:
.flex{显示:flex;flex-wrap:包装;}
.box{背景:灰色;身高:100 px;min-width: 100 px;flex:汽车;}
.flex包装{轮廓:1px固体红色;}
/* -----伸缩间隙10px: ----- */
.flex > * {
保证金:5 px;
}
.flex {
保证金:5 px;
}
.flex-wrapper {
宽度:400 px;/* optional */
溢出:隐藏;/* optional */
}
< div class = ' flex-wrapper ' >
< div class = ' flex ' >
< div class = '盒子' > < / div >
< div class = '盒子' > < / div >
< div class = '盒子' > < / div >
< div class = '盒子' > < / div >
< div class = '盒子' > < / div >
< / div >
< / div >