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

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

• 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; }.upper > div{  flex:1 1 auto;  border:1px red solid;  text-align:center;  margin:5px;  }.upper.mc {flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}<div >  <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 >  <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>