弹性盒项目之间的间距

Question

这就是我要的：

但这是我最接近的：

 body{
    margin: 0;
    padding: 0;
    border: 1px solid red;
}

.flex{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flexbox;
  display: -webkit-flex;
  display: flex;
}

.flex > *{ margin: 0 10px; }
.flex > :first-child{ margin-left: 0; }
.flex > :last-child{ margin-right: 0; }

.flex.vertical > *{ margin: 10px 0; }
.flex.vertical > :first-child{ margin-top: 0; }
.flex.vertical > :last-child{ margin-bottom: 0; }

.vertical{
      -webkit-box-orient: vertical;
         -moz-box-orient: vertical;
              box-orient: vertical;
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.box{
  background: #000;
  flex: auto;
  min-height: 100px;
}

 <div class="flex vertical">
  <div class="flex">
    <div class="box"> </div>
    <div class="box"> </div>
  </div>
  <div class="flex">
    <div class="box"> </div>
    <div class="box"> </div>
    <div class="box"> </div>
  </div>

  <div class="flex">
    <div class="box"> </div>
    <div class="box"> </div>
  </div>
</div>

我在 flexbox 项目上应用边距，然后从第一个和最后一个孩子中删除一半。

问题是 :first-child 在视觉上并不总是第一个，因为我可能会使用 flexbox 排序实用程序更改布局顺序。例如：

 .flex > *{
  -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
             -ms-flex-order: 2;
              -webkit-order: 2;
                      order: 2;
}

#important{
  -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
             -ms-flex-order: 1;
              -webkit-order: 1;
                      order: 1;
}

body{
    margin: 0;
    padding: 0;
    border: 1px solid red;
}

.flex{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flexbox;
  display: -webkit-flex;
  display: flex;
}

.flex > *{ margin: 0 10px; }
.flex > :first-child{ margin-left: 0; }
.flex > :last-child{ margin-right: 0; }

.flex.vertical > *{ margin: 10px 0; }
.flex.vertical > :first-child{ margin-top: 0; }
.flex.vertical > :last-child{ margin-bottom: 0; }

.vertical{
      -webkit-box-orient: vertical;
         -moz-box-orient: vertical;
              box-orient: vertical;
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.box{
  background: #000;
  flex: auto;
  min-height: 100px;
}

 <div class="flex vertical">
  <div class="flex">
    <div class="box"> </div>
    <div class="box"> </div>
  </div>
  <div class="flex">
    <div class="box"> </div>
    <div class="box" id="important"> </div>
    <div class="box"> </div>
  </div>

  <div class="flex">
    <div class="box"> </div>
    <div class="box"> </div>
  </div>
</div>

有没有办法在应用边距时考虑视觉顺序？

原文由 nice ass 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS 规范最近已 更新，除了 CSS 网格元素外，还将 gap 属性应用于 flexbox 元素。 所有主要浏览器的最新版本都支持此功能。使用 gap 属性，您只需 gap: 10px （或您想要的任何大小）即可获得所需的内容。

原文由 neurodynamic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以尝试为所有框设置相同的边距，然后在容器上恢复它：

所以替换这个：

 .flex > * { margin: 0 10px; }
.flex > :first-child { margin-left: 0; }
.flex > :last-child { margin-right: 0; }

.flex.vertical > :first-child { margin-top: 0; }
.flex.vertical > :last-child { margin-bottom: 0; }

有了这个：

 .flex.vertical { margin: -20px 0 0 -20px; }
.flex > * { margin: 0 0 0 20px; }
.flex.vertical > * { margin: 20px 0 0 0; }

原文由 agrm 发布，翻译遵循 CC BY-SA 3.0 许可协议