要设置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的方法来做到这一点(可以认为“更好”)。

在这里发布的所有答案中,我只找到了一个成功使用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

其他回答

你可以使用透明边框。

我在尝试构建一个灵活的网格模型时考虑过这个问题,该模型可以为旧的浏览器退回到表格+表格单元模型。在我看来,作为圆柱排水沟的Borders似乎是最合适的选择。例如,表格单元格没有边距。

e.g.

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

还要注意你需要min-width: 50px;flexbox。flex模型不会处理固定大小,除非你执行flex: none;在你想要固定的子元素上,因此被排除在“可伸缩”之外。http://jsfiddle.net/GLpUp/4/ 但是所有列和flex一起:none;不再是弹性模型。 这里有一个更接近flex模型的东西:http://jsfiddle.net/GLpUp/5/

所以你可以正常使用页边距如果你不需要旧浏览器的表单元格回退。http://jsfiddle.net/GLpUp/3/

背景剪辑:填充盒;在使用背景时将是必要的,否则背景将流入透明边框区域。

使用flexbox,创建排水沟是一种痛苦,特别是当涉及到包装时。

你需要使用负边距(如问题所示):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

... 或更改HTML(如另一个答案所示):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... 或者别的什么。

在任何情况下,你都需要一个丑陋的黑客来让它工作,因为flexbox不提供“弹性间隙”功能 (至少现在是这样)。

水槽的问题,然而,是简单和容易的CSS网格布局。

Grid规范提供了在网格项之间创建空间的属性,而忽略项和容器之间的空间。这些属性是:

grid-column-gap grid-row-gap 网格间隙(以上两个属性的简写)

最近,该规范已经更新,以符合CSS框对齐模块,它提供了一组用于所有框模型的对齐属性。属性现在是:

纵队间隔 row-gap 差距(简写)

然而,并不是所有支持grid的浏览器都支持更新的属性,所以我将在下面的演示中使用原始版本。

同样,如果项目和容器之间需要空格,容器上的填充就可以了(请参阅下面演示中的第三个示例)。

来自规范:

10.1. 排水沟:行隙、列隙、隙 属性 行间隙和列间隙属性(以及它们的间隙简写), 当在网格容器上指定时,定义网格之间的水槽 行和网格列。它们的语法在CSS框对齐3中定义 §8箱子之间的空隙。 这些属性的效果就像受影响的网格线一样 获取厚度:两条网格线之间的网格轨迹就是空间 在代表他们的排水沟之间。

.box { 显示:inline-grid; grid-auto-rows: 50 px; Grid-template-columns:重复(4,50px); 边框:1px纯黑色; } 。{ grid-column-gap: 5 px; } :({ grid-column-gap: 10 px; grid-row-gap: 10 px; } .three { grid-gap: 10 px; 填充:10 px; } .item { 背景:浅灰色; } <div class='box one'> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div > <人力资源> <div class='box two'> < 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 > <人力资源> <div class='box 3 '> < 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 >

更多信息:

浏览器对CSS网格的支持 更容易定义只应用于伸缩项之间的页边距(讨论) flexbox项目之间的间距

一个带有-x(负)边距的伸缩容器和带有x(正)边距或填充的伸缩项都会导致预期的视觉结果:伸缩项之间只有2x的固定间距。

这似乎只是一个偏好问题,是在伸缩项上使用边距还是填充。

在这个例子中,为了保持固定的间隙,伸缩项是动态缩放的:

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}

只需在选择器中使用.item + .item来匹配第二个.item

#箱{ 显示:inline-flex; Margin: 0 -5px; } .item { 背景:灰色; 宽度:10 px; 高度:50 px; } #box .item + .item { margin-left: 10 px; } < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

盒子容器上的负边距技巧效果很好。这是另一个例子,工作的秩序,包装和什么不。

.container { 边框:1px纯绿色; 宽度:200 px; 显示:inline-block; } #箱{ 显示:flex; flex-wrap: wrap-reverse; 保证金:-10 px; 边框:1px纯红色; } .item { Flex: 1台自动; 顺序:1; 背景:灰色; 宽度:50 px; 高度:50 px; 保证金:10 px; 边框:1px纯蓝色; } 当代{ 秩序:0; } < div class =容器> < div id =“盒子”> < div class = '物品' > 1 < / div > < div class = '物品' > < / div > 2 <div class='item first'>3*</div> 4 < div class = '物品' > < / div > < div class = '物品' > < / div > 5 < / div > < / div >