css - 设置弹性框项目之间距离的更好方法(Better way to set distance between flexbox items)

Question

To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container.

(要设置我使用Flexbox的项目之间的最小距离margin: 0 5px上.item和margin: 0 -5px集装箱。)

For me it seems like a hack, but I can't find any better way to do this.

(对我来说，这似乎是一种hack，但是我找不到更好的方法来做到这一点。)

Example

(例)

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

  ask by Sasha Koss translate from so

Answer 1

• Flexbox doesn't have collapsing margins.

  (Flexbox的利润率没有下降。)

• Flexbox doesn't have anything akin to border-spacing for tables (except for CSS property gap which isn't well supported in most browsers, caniuse )

  (Flexbox与表格的border-spacing没有任何区别（除了CSS属性gap外，大多数浏览器都无法很好地支持CSS属性gap ， caniuse ）)

Therefore achieving what you are asking for is a bit more difficult.

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

In my experience, the "cleanest" way that doesn't use :first-child / :last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children.

(以我的经验，不使用:first-child / :last-child且不对flex-wrap:wrap进行任何修改的“最干净”方式是在容器上设置padding:5px ，在子padding:5px上设置margin:5px 。)

That will produce a 10px gap between each children and between each children and their parent.

(这将在每个孩子之间以及每个孩子与其父母之间产生10px间隙。)

Demo

(演示版)

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