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

  • Z时代
  • 2024-01-10
  • 分类：问答

要设置我在容器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>

回答：

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

以上是 设置弹性框项目之间距离的更好方法 的全部内容， 来源链接： utcz.com/qa/398926.html

回到顶部