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

Question

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

例

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

Answer 1

• Flexbox的利润率没有下降。
• Flexbox没有类似于border-spacing表的任何东西（除了CSS属性gap，大多数浏览器都无法很好地支持CSS属性，caniuse）

因此，实现您的要求会有点困难。

以我的经验，不使用:first-child/ :last-child且不作任何修改就flex-wrap:wrap可以工作的“最干净”的方式是padding:5px在容器和margin:5px孩子身上设置。这将10px在每个孩子之间以及每个孩子与其父母之间产生差距。

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