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

发布于12月18日

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

#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 property 102 fulfills this role in newer browsers, 100)

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

根据我的经验，最"干净"的方法是在容器上设置padding:5px，在 children 上设置margin:5px，而不使用:first-child/:last-child，并且在flex-wrap:wrap上不做任何修改.这将在每个子元素之间以及每个子元素与父母之间产生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>

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

推荐答案

Css相关问答推荐

在ReactJS中使用动画在栅格上添加柱

防止在添加更多项目时扩展CSS网格行

Firefox中的解决方法：has(不使用JavaScript)

是否可以在元素之间对齐渐变？

如何为图像堆叠效果下方的图层实现与磨砂玻璃类似的视觉效果

Tailwind CSS 不输出背景类

有没有办法将px单位添加到 Sass mixin 的参数数组中？

我想在视频上使用混合混合模式的 svg

Mat table - 保留第一列和复选框

如何在相对位置和绝对位置之间转换元素？

如果中间元素的内容不适合 CSS，如何将其分隔到新行？

Sass @use 排序

CSS - 等高列？

你能用 JavaScript 控制 GIF 动画吗？

纯 CSS 滚动动画

如何使用 Bootstrap 3 阻止按钮保持压抑状态

如何将 bootstrap 列高设为 100% 行高？

如何仅使用 CSS 制作网格(如方格纸网格)？

使用 CSS go 除图像之间的空间

堆叠半透明盒子的 colored颜色取决于订单？