弹性项目之间的空间相等

Question

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

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

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

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

Answer 1

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

伪元素

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

流入::after和::before伪元素现在是弹性项目.

实际上,所有主流浏览器都认为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框对齐模块,这是W3C的建立一套共同的所有箱的型号使用的取向性的未完成的建议,提供了space-evenly与使用价值justify-content和align-content性能.

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

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页面的有用演示,用于测试space-evenly和浏览器中的其他值.https://jsfiddle.net/gkrsr86n/

Answer 2

只有在 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 3

您可以通过设置paddingFlex容器和marginflex项目来完成此操作:

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

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

Answer 4

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

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

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


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

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