要设置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 >
你可以利用新的房产缺口。我复制粘贴了我在本文中找到的解释,以及更多的信息
CSS的网格布局有差距(以前的网格差距)有一段时间了。通过指定包含元素的内部间距而不是子元素周围的间距,gap解决了许多常见的布局问题。例如,使用gap,你不必担心子元素的边距会在包含元素的边缘造成不必要的空白:
不幸的是,目前只有FireFox支持flex布局中的gap。
@use postcss-preset-env {
阶段:0;
浏览器:最近2个版本
}
节{
宽度:30大众;
显示:网格;
差距:1快速眼动;
Grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
& (flex) {
显示:flex;
flex-wrap:包装;
}
margin-bottom: 3快速眼动;
}
.tag {
颜色:白色;
背景:hsl(265 100% 47%);
填充:.5rem 1rem;
border - radius: 1快速眼动;
}
按钮{
显示:inline-flex;
名:中心;
差距:.5rem;
背景:hsl(265 100% 47%);
边框:1px固体hsl(265 100% 67%);
颜色:白色;
填充:1rem 2rem;
border - radius: 1快速眼动;
字体大小:1.25快速眼动;
}
身体{
最小高度:100 vh;
显示:flex;
flex-direction:列;
justify-content:中心;
对齐项目:中心;
}
< >节
<标题> < / h1 >网格
< div class = "标签" >的< / div >
< div class = "标签" >首席运营官< / div >
< div class = "标签" > Rad < / div >
< div class = "标签" > < / div >数学
< / >节
< br >
< flex节>
<标题> Flex h1 > < /
< div class = "标签" >的< / div >
< div class = "标签" >首席运营官< / div >
< div class = "标签" > Rad < / div >
< div class = "标签" > < / div >数学
< / >节