要设置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 >
假设:
你想要4列网格布局与包装
项目的数量不一定是4的倍数
除了第1、5、9项以外,每项都设置左距;并在每个项目上设置固定宽度。如果左边的边距是10px,那么每行4个项目之间的边距是30px,项目宽度的百分比可以计算如下:
100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4
这是一个体面的工作,涉及flexbox最后一行的问题。
.flex {
显示:flex;
flex-direction:行;
flex-wrap:包装;
保证金:1em 0;
background - color:桃色;
}
.item {
margin-left: 10 px;
边框:1px实体;
填充:10 px;
宽度:calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
background - color:番木瓜;
}
.item:n -child(4n + 1) {
margin-left: 0;
}
.item:n -child(n + 5) {
margin-top: 10 px;
}
flex < div class = " " >
< div class = "项目" > < / div > 1
< div class = "项目" > < / div > 2
< div class = "项目" > 3 < / div >
4 < div class = "项目" > < / div >
< / div >
flex < div class = " " >
< div class = "项目" > < / div > 1
< div class = "项目" > < / div > 2
< div class = "项目" > 3 < / div >
4 < div class = "项目" > < / div >
5 < div class = "项目" > < / div >
< div class = "项目" > < / div > 6
< / div >
flex < div class = " " >
< div class = "项目" > < / div > 1
< div class = "项目" > < / div > 2
< div class = "项目" > 3 < / div >
4 < div class = "项目" > < / div >
5 < div class = "项目" > < / div >
< div class = "项目" > < / div > 6
< div class = "项目" > < / div > 7
< div class = "项目" > < / div > 8
< div class = "项目" > < / div > 9
< / 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 >
Flexbox的利润率并没有下降。
Flexbox没有任何类似于表的边界间距(编辑:CSS属性差距在较新的浏览器中实现了这一角色,我可以使用吗)
因此,实现你的要求有点困难。
根据我的经验,不使用:first-child/:last-child,并且对flex-wrap:wrap不做任何修改的“最干净”的方法是在容器上设置padding:5px,在子元素上设置margin:5px。这将在每个子元素之间以及每个子元素与其父元素之间产生10px的间隙。
Demo
.upper {
保证金:30 px;
显示:flex;
flex-direction:行;
宽度:300 px;
身高:80 px;
边框:1px红色实体;
填充:5 px;/* this */
}
.upper > div {
Flex: 1台自动;
边框:1px红色实体;
text-align:中心;
保证金:5 px;/*,这将导致10px的差距*/
}
.upper。MC /* multicol test */ {
flex-direction:列;
flex-wrap:包装;
宽度:200 px;
身高:200 px;
}
< div class = "上" >
< div > 3 < br / > aaa < / div >
< div > 3 < / div >
< div > 3 < br / > aaa < / div >
< div > 3 < br / > aaa < br / > aaa < / div >
< div > 3 < / div >
< div > 3 < / div >
< / div >
<div class="上MC ">
< div > 3 < br / > aaa < / div >
< div > 3 < / div >
< div > 3 < br / > aaa < / div >
< div > 3 < br / > aaa < br / > aaa < / div >
< div > 3 < / div >
< div > 3 < / div >
< / div >
你可以使用& > * + *作为选择器来模拟一个弹性间距(对于单行):
#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 >