Html 弹性项目之间的等距

Equal space between flex items

提问by Alexis

Is there a way to put a full unit of space on both sides of all items, including the first and last?

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

I am trying to find a way to have equal spacing around flexbox children.

我试图找到一种方法，使 flexbox 子项周围的间距相等。

In this articleit seems like the nearest thing is justify-content: space-around. It says that:

在这篇文章中，似乎最接近的事情是justify-content: space-around. 它说：

space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

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

回答by Michael Benjamin

There are at least two methods for equal space between all items, including the first and last items. One method, however, doesn't yet have full browser support.

至少有两种方法可以使所有项目之间的间距相等，包括第一个和最后一个项目。然而，一种方法还没有完全的浏览器支持。

---

---

pseudo-elements

伪元素

Note this section from Firefox documentation:

请注意 Firefox 文档中的这一部分：

In-flow ::afterand ::beforepseudo-elements are now flex items.

流入::after和::before伪元素现在是 flex items。

In fact, all major browsers consider pseudo-elements on a flex container to be flex items.

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

Knowing that, add ::beforeand ::afterto your container.

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

With justify-content: space-betweenand zero-width pseudo-elements, the visible flex items will appear evenly spaced.

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

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

space-evenly

The CSS Box Alignment Module, which is the W3C's unfinished proposal to establish a common set of alignment properties for use across all box models, provides the space-evenlyvalue for use with the justify-contentand align-contentproperties.

该CSS框对齐模块，这是W3C的建立一套共同的所有箱的型号使用的取向性的未完成的建议，提供了space-evenly与使用价值justify-content和align-content性能。

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

space-evenly

The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end.

The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same.

4.3. 分布式阵营：在stretch，space-between， space-around，和space-evenly关键字

space-evenly

对齐对象均匀分布在对齐容器中，两端留有全尺寸空间。

对齐对象的分布使得任意两个相邻对齐对象之间的间距在第一个对齐对象之前和最后一个对齐对象之后是相同的。

As of this writing, however, it looks like space-evenlyonly works in Firefox and Chrome.

然而，在撰写本文时，它似乎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>

Also, here's a useful demo from the MDN justify-contentpagefor testing space-evenlyand other values in your browser. https://jsfiddle.net/gkrsr86n/

此外，这里有一个来自MDNjustify-content页面的有用演示，用于测试space-evenly浏览器中的其他值。https://jsfiddle.net/gkrsr86n/

回答by Daniel D

You can do this by setting the paddingof the flex container and the marginof the flex items:

您可以通过设置paddingflex 容器的 和marginflex 项目的来做到这一点：

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

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

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

回答by J.McLaren

This is a perfect use case for flex-basisand justify-content: space-betweenif you know how many components will be in your row beforehand. Specify a flex-basis percentage on your flex-items that totals less than 100% for all items. The leftover percentages will become margins.

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

No psuedo elements, child selectors or padding/margin.

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

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


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

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

回答by Michael Coker

In firefox only there is a space-evenlyvalue for justify-contentthat does this.

只有在 Firefox 中才有一个space-evenly值justify-content可以做到这一点。

It's in the CSS3 working draft

它在 CSS3 工作草案中

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

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>

回答by itacode

You could try this:

你可以试试这个：

*, *: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>

回答by Anil

You can use flexbox's all property form here. this is perfect example for how to use complete flex property with example http://the-echoplex.net/flexyboxes/

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