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


当前回答

你可以使用透明边框。

我在尝试构建一个灵活的网格模型时考虑过这个问题,该模型可以为旧的浏览器退回到表格+表格单元模型。在我看来,作为圆柱排水沟的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/

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

其他回答

你可以使用& > * + *作为选择器来模拟一个弹性间距(对于单行):

#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 >

一个带有-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;
}

你可以试试CSS3的:not选择器

Eg:

#箱{ 显示:flex; 宽度:100 px; 边框:1px红色实体; } .item { 背景:灰色; 宽度:10 px; 身高:100 px; Flex: 1台自动; } .item:没有(胎){ margin-right: 5 px; } < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

我发布了我的flexbox方法 在这里:

我拒绝的一个想法是去掉外部列的填充物,就像这样:

div:nth-child(#{$col-number}n+1) { padding-left: 0; }
div:nth-child(#{$col-number}n+#{$col-number}) { padding-left: 0; }

但是,像这里的其他海报一样,我更喜欢负边距技巧。我的小提琴也有响应任何人正在寻找一个基于sass的解决方案。我基本上使用这种方法来代替网格。

https://jsfiddle.net/x3jvfrg1/

嗯,在我看来,关于CSS最简单的解决方案, 是在HTML中添加间隔符:

<div id='box'>
  <div class='item'></div>
  <div style='width: 5px;'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

所以,你可以用内联风格或类名来控制它。 有时候,也可以用填充来做间距。

下面是一个例子

好吧,现在你有一个缺口,所以你可以使用它,但好的ol技术仍然是不可避免的,像<div><div></div></div>包装构造独特的项目与独特的缺口(使用填充物为缺口!和ofc新的gap属性)