Question

有没有办法在所有物品的两边放置一整套空间，包括第一个和最后一个？

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

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

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

Answer 1

至少有两种方法可以在所有项目之间保持相等的空间，包括第一项和最后一项。但是，有一种方法还没有完整的浏览器支持。

伪元素

请注意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和{一起使用{1}}属性。

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

<强> align-content

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

对准对象被分布，使得任何两个相邻的对齐对象之间的间隔，在第一对齐对象之前，以及之后   最后一个对齐主题是相同的。

在撰写本文时，看起来space-evenly 仅适用于Firefox和Chrome 。

space-evenly

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;
}

此外，这是一个有用的演示，来自MDN justify-content page用于测试<flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container>和浏览器中的其他值。 https://jsfiddle.net/gkrsr86n/

Answer 2

您可以通过设置弹性容器的padding和弹性项目的margin来执行此操作：

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

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

Answer 3

在Firefox中，space-evenly只有justify-content值才能执行此操作。

它出现在CSS3工作草案中

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

你可以试试这个：

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

Answer 5

如果您事先知道行中将有多少个组件，那么这是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 6

您可以在此处使用flexbox的所有属性表单。这是如何使用完整的flex属性的完美示例 http://the-echoplex.net/flexyboxes/

弹性项目之间的空间相等

6 个答案:

伪元素

`space-evenly`