要设置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 >
你可以利用新的房产缺口。我复制粘贴了我在本文中找到的解释,以及更多的信息
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 >数学
< / >节
这种解决方案适用于所有情况,即使有多行或任意数量的元素。但是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 >