弹性项目之间的空间相等

Question

有没有办法在所有项目的两侧放置一个完整的空间单位，包括第一个和最后一个？

我正在尝试找到一种在 flexbox 子项周围具有相等间距的方法。

在this article 中，最接近的似乎是justify-content: space-around。它说：

space-around: 项目均匀分布在同一行 他们周围的空间。请注意，视觉上的空间是不相等的，因为 所有项目的两侧都有相同的空间。 第一项将 在容器边缘有一个单位的空间，但有两个单位的 下一项之间的空间 因为下一项有自己的 适用的间距。

Answer 1

如果您事先知道行中有多少组件，这是 flex-basis 和 justify-content: space-between 的完美用例。为您的弹性项目指定一个弹性基础百分比，所有项目的总和小于 100%。剩余的百分比将成为边距。

没有伪元素、子选择器或填充/边距。

div {
  display: flex;
  justify-content: space-between;
  height: 100px;


}
span {
  flex-basis: 32%;
  background: red;
}

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 2

至少有两种方法可以让所有项目（包括第一个项目和最后一个项目）之间的空间相等。但是，一种方法尚不具备完整的浏览器支持。

---

伪元素

请注意 Firefox 文档中的此部分：

In-flow ::after and ::before pseudo-elements are now flex items.

事实上，所有主流浏览器都将 flex 容器上的伪元素视为 flex 项。

知道这一点后，将 ::before 和 ::after 添加到您的容器中。

使用justify-content: space-between 和零宽度伪元素，可见的弹性项目将均匀分布。

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before {
  content: "";
}

flex-container::after {
  content: "";
}

/* non-essential decorative styles */
flex-container {
  padding: 5px 0;
  background-color: lightyellow;
  border: 1px solid #aaa;
}
flex-item {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
}

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

---

space-evenly

CSS Box Alignment Module 是 W3C 的未完成提案，旨在建立一套通用的对齐属性以供所有盒子模型使用，它提供了 space-evenly 值以与 justify-content 和 align-content 属性一起使用。

4.3. Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords

space-evenly

对齐主题均匀分布在对齐中 容器，两端都有一个全尺寸的空间。

对齐主题的分布使得任何两个相邻对齐主题之间的间距，在第一个对齐主题之前和之后 最后对齐主题相同。

然而，在撰写本文时，space-evenly仅适用于 Firefox 和 Chrome。

flex-container {
  display: flex;
  justify-content: space-evenly;
}

/* non-essential decorative styles */
flex-container {
  padding: 5px 0;
  background-color: lightyellow;
  border: 1px solid #aaa;
}
flex-item {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
}

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

另外，这里有一个来自MDN justify-content page 的有用演示，用于在您的浏览器中测试space-evenly 和其他值。 https://jsfiddle.net/gkrsr86n/

Answer 3

您可以通过设置弹性容器的padding 和弹性项目的margin 来做到这一点：

.container { 
  display: flex;   
  padding: 0 1%;
}
.item { 
  flex: 1; 
  margin: 0 1%;
}

https://codepen.io/danieldilly/pen/PjgRbe

Answer 4

您可以在这里使用 flexbox 的所有属性形式。这是如何通过示例使用完整的 flex 属性的完美示例 http://the-echoplex.net/flexyboxes/

Answer 5

只有在 firefox 中，space-evenly 的 justify-content 值可以做到这一点。

在 CSS3 工作草案中

https://www.w3.org/TR/css-align-3/#valdef-align-content-space-evenly

div {
  display: flex;
  height: 100px;
  justify-content: space-evenly;
  border: 1px solid black;
  margin: auto;
}
span {
  width: 20%;
  background: red;
}

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 6

你可以试试这个：

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.list_wrap {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid purple;
  padding-top: 5px;
}
.list_item {
  width: 24%;
  margin-right: 0.8%;
  margin-bottom: 5px;
  height: 30px;
  border: 1px solid green;
}
.list_item:nth-child(4n+1) {
  margin-left: 0.8%;
}

<div class="list_wrap">
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
</div>