更好的方法来设置弹性框项目之间的距离

我在.item上使用margin: 0 5px，在容器上使用margin: 0 -5px，来设置flexbox项目间的最小距离。对我来说，这似乎是一个黑客，但我找不到任何更好的方法来做到这一点。

[例子][1] 。

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
Salman A
已编辑的问题 3日 十二月 2018 в 7:27
编程
css3 css flexbox
17日 十二月 2013 в 5:35
37 种观点
解决办法
  • Flexbox没有塌陷的边距。
  • Flexbox没有类似于表格的 "边框间距 "的东西（除了CSS属性 "间隙"，大多数浏览器不支持该属性，[caniuse][1]）。

因此，要实现你的要求就有点困难了。

根据我的经验，不使用:第一个孩子/:最后一个孩子，并且在不修改flex-wrap:wrap的情况下，最干净的方法是在容器上设置padding:5px，在孩子上设置margin:5px。这将在每个孩子之间以及每个孩子和他们的父母之间产生一个10px的间隙。

[演示](http://jsfiddle.net/7XD8s/)

.upper
{
  margin:30px;
  display:flex;
  flex-direction:row;
  width:300px;
  height:80px;
  border:1px red solid;

  padding:5px; /* this */
}

.upper > div
{
  flex:1 1 auto;
  border:1px red solid;
  text-align:center;

  margin:5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}
<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>
Flimm
编辑本段答案21日 九月 2019 в 3:42
评论(9)

你可以使用透明的边框。

我在试图建立一个灵活的网格模型时考虑了这个问题，该模型可以在旧的浏览器上退回到表格+表单元格模型。在我看来，列间的边框是最合适的选择，也就是说，表格单元没有边框。

比如说

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

还要注意的是，你需要min-width: 50px;用于flexbox。Flex模型不会处理固定的尺寸，除非你在特定的子元素上做了flex: none;，你希望它是固定的，因此被排除在"flexi"之外。 http://jsfiddle.net/GLpUp/4/ 但所有的列加上flex:none;就不再是一个flex模型了。 下面是更接近于柔性模型的东西： http://jsfiddle.net/GLpUp/5/

因此，如果你不需要老式浏览器的表格单元格回退，你实际上可以正常使用页边距。http://jsfiddle.net/GLpUp/3/

当使用背景时，设置background-clip: padding-box;将是必要的，否则背景将流入透明边框区域。

Tracker1
编辑本段答案15日 三月 2017 в 11:03
评论(9)

我发现最简单的方法是用百分比来做，只需让边距达到你的宽度就可以了。

这意味着你最终会得到这样的结果，如果你使用你的例子的话

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

这意味着你的值是基于宽度的，但这可能对每个人都不太合适。

评论(1)