要设置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 >


当前回答

这不是黑客。 bootstrap和它的网格也使用了同样的技术,不过,bootstrap为它的cols使用了padding而不是margin。

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}

其他回答

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; flex-grow: 1; flex-shrink: 1; } .box。列{ flex-direction:行; } .box.columns > .box ~。盒子{ margin-left: 5 px; } .box。行{ flex-direction:列; } .box.rows > .box ~。盒子{ margin-top: 5 px; } <div class="box columns"> < span style=" font - family:宋体;"> < / div > <div class="box rows"> <div class="box rows"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > <div class="box columns"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > < / div > < / div > < span style=" font - family:宋体;"> < / div > < / div > < / div >

确实有一种很好的、整洁的、只使用css的方法来做到这一点(可以认为“更好”)。

在这里发布的所有答案中,我只找到了一个成功使用calc()的答案(由Dariusz Sikorski)。但当提出:“但如果最后一行只有2项,它就失败了”时,就没有展开解。

这个解决方案解决了OP的问题,替代了负边际,解决了Dariusz的问题。

注:

本例只演示了3列布局 它使用calc()让浏览器以它想要的方式进行数学运算—— 100%/3(尽管33.3333%也可以),以及 (1em/3)*2(尽管。66em也可以)。 如果元素少于列,则使用::after填充最后一行

.flex-container { 显示:flex; justify-content:之间的空间; flex-wrap:包装; } .flex-container:{后 内容:“”; } .flex-container > .flex-container:{后 box-sizing: border-box; 宽度:calc((100%/3) - ((1em/3)*2)); } .flex-container >:n -child(n + 4) { margin-top: 1 em; } /*下面只是为了可视化项目*/ .flex-container > .flex-container:{后 字体大小:2 em; } .flex-container { margin-bottom: 4 em; } .flex容器> div { text-align:中心; background - color: # aaa级; 填充:1 em; } .flex-container:{后 边框:1px红色虚线; } <h2>示例1(2个元素)</h2> < div class = " flex-container”> < div > 1 < / div > 2 < div > < / div > < / div > <h2>示例2(3个元素)</h2> < div class = " flex-container”> < div > 1 < / div > 2 < div > < / div > < div > 3 < / div > < / div >

另见https://codepen.io/anon/pen/rqWagE

这种解决方案适用于所有情况,即使有多行或任意数量的元素。但是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 >

下面是一个使用灵活的方框完成间距的卡片UI元素网格:

我很沮丧手动间距卡操纵填充和空白与可疑的结果。下面是我发现的非常有效的CSS属性组合:

.card-container { 宽度:100%; 身高:900 px; overflow-y:滚动; max-width:继承; background - color: # ffffff; /*这里是有关flexbox的东西*/ 显示:flex; flex-direction:行; justify-content:中心; 对齐项目:flex-start; flex-wrap:包装; } /* .card元素*/的补充样式 .card { 宽度:120 px; 身高:120 px; background - color: # ffeb3b; border - radius: 3 px; Margin: 20px 10px 20px 10px; } <节课= " card-container " > < div class = "牌”> < / div > < div class = "牌”> < / div > < div class = "牌”> < / div > < div class = "牌”> < / div > < / >节

希望这对现在和未来的人们有所帮助。