css - flex-wrap 如何与 align-self、align-items 和 align-content 配合使用？

Question

align-self
在以下代码中， align-self 与 flex-wrap: nowrap 一起使用。

flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}
flex-item:last-child {
  align-self: flex-end;
  background-color: crimson;
}

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

但是当容器切换到 flex-wrap: wrap 时， align-self 属性失败。

flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}
flex-item:last-child {
  align-self: flex-end;
  background-color: crimson;
}

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

align-items
同样，为什么 align-items 在这里工作(禁用包装):

flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

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

...但不是在这里(启用包装):

flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}

flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

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

align-content
使用 flex-wrap: nowrap ， align-content 属性不会在此处垂直居中 flex 元素:

flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  width: 250px;
  height: 250px;
  background-color: silver;
}

flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

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

但是，奇怪的是，如果启用了 wrap 并且忽略了 align-content，则容器会在此处的行之间产生很大的间隙:

flex-container {
  display: flex;
  flex-wrap: wrap;
  /* align-content: center; */
  width: 250px;
  height: 250px;
  background-color: silver;
}

flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

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

并且 align-self 再次起作用。

flex-container {
  display: flex;
  flex-wrap: wrap;
  /* align-content: center; */
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

flex-item:nth-child(even) {
  align-self: flex-end;
  background-color: crimson;
}

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

How does flex-wrap work with align-self, align-items and align-content?

Answer 1

简答
尽管 flex-wrap 属性看起来很基本——它控制着 flex 元素是否可以包装——但它实际上对整个 flexbox 布局有广泛的影响。flex-wrap 属性决定了你将使用的 flex 容器的类型。

flex-wrap: nowrap 创建一个 单行 flex 容器

flex-wrap: wrap 和 wrap-reverse 创建一个 多行 flex 容器 0x25181921130412194213041219421391219
align-items 和 align-self 属性适用于单行和多行容器。但是，它们只有在柔性线的交叉轴上有可用空间时才能起作用。align-content 属性仅适用于多行容器。它在单行容器中被忽略。

解释
flexbox specification 提供了四个用于对齐 flex 元素的关键字属性:

align-items

align-self

align-content

justify-content

要了解这些属性的功能，首先要了解 flex 容器的结构很重要。

第 1 部分:了解 Flex 容器的主轴和横轴
X 轴和 Y 轴
flex 容器在两个方向上工作:x 轴(水平)和 y 轴(垂直)。

来源:Wikipedia
flex 容器的子元素——称为“flex 元素”——可以在任一方向对齐。 (忽略上图中的 z 轴。它在这里不适用。)
这是最基本的 flex 对齐。
主轴和交叉轴
在 flex 布局中，重叠 x 轴和 y 轴是主轴和横轴。
默认情况下，主轴为水平(x 轴)，交叉轴为垂直(y 轴)。这是初始设置，由 flexbox specification 定义。

来源:W3C
但是，与固定的 x 轴和 y 轴不同，主轴和横轴可以切换方向。
flex-direction 属性
在上图中，主轴是水平的，横轴是垂直的。如前所述，这是 flex 容器的初始设置。
但是，这些方向可以通过 flex-direction 属性轻松切换。该属性控制主轴的方向；它确定 flex 元素是垂直对齐还是水平对齐。
从规范:

5.1. Flex Flow Direction: the flex-directionproperty

The flex-direction property specifies how flex items are placed inthe flex container, by setting the direction of the flex container’smain axis. This determines the direction in which flex items are laidout.

flex-direction 属性有四个值:

/* main axis is horizontal, cross axis is vertical */
flex-direction: row; /* default */
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

横轴总是垂直于主轴。

第 2 部分:柔性线
在容器内， flex 元素存在于一行中，称为“flex 线”。
flex 线是一行或一列，取决于 flex-direction 。
一个容器可以有一行或多行，具体取决于 flex-wrap 。
单线 flex 容器 flex-wrap: nowrap 建立了一个单行的 flex 容器，其中 flex 元素被强制留在一行中(即使它们溢出容器)。

上图有一条柔性线。

flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap; /* <-- allows single-line flex container */
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  width: 50px;
  margin: 5px;
  background-color: lightgreen;
}

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

多行 Flex 容器 flex-wrap: wrap 或 wrap-reverse 建立多行 flex 容器， flex 元素可以在其中创建新行。

上图有 3 条 flex 线。

flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; /* <-- allows multi-line flex container */
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  width: 50px;
  margin: 5px;
  background-color: lightgreen;
}

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

上图有 3 条 flex 线。

flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* <-- allows multi-line flex container */
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

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

第 3 部分:关键字对齐属性
属性分配给主和交叉(不是 X 和 Y)轴
虽然 flex-direction 属性控制 flex 元素的布局方向，但有四个属性控制对齐和定位。这些是:

align-items

align-self

align-content

justify-content

这些属性中的每一个都永久分配给一个轴。justify-content 属性仅适用于主轴。
三个 align-* 属性仅在交叉轴上起作用。
假设这些属性固定在 x 和 y 轴上是一个常见的错误。例如，justify-content 总是水平的，而 align-items 总是垂直的。
但是，当 flex-direction 切换到 column 时，主轴变为 y 轴，justify-content 垂直工作。
这篇文章的重点是跨轴对齐。有关主轴对齐和 justify-content 属性的说明，请参阅此帖子:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

定义
flexbox 规范为跨轴对齐提供了三个关键字属性:

align-items

align-self

align-content

align-items/align-selfalign-items 属性沿 flex 线的交叉轴对齐 flex 元素。它适用于 flex 容器。align-self 属性用于覆盖单个 flex 元素上的 align-items。它适用于 flex 元素。
这是规范中的定义:

8.3. Cross-axis Alignment: the align-items and align-selfproperties

Flex items can be aligned in the cross axis of the current line of theflex container, similar to justify-content but in the perpendiculardirection. align-items sets the default alignment for all of theflex container’s items. align-self allows this default alignment tobe overridden for individual flex items.

align-items/align-self 有六个可能的值:

flex-start

flex-end

center

baseline

stretch

auto(仅 align-self)

(有关每个值的说明，请单击上面的规范定义标题。)align-items 的初始值是 stretch ，这意味着 flex 元素将扩展容器横轴的全部可用长度。align-self 的初始值是 auto ，这意味着它继承了 align-items 的值。
下面是行方向容器中每个值的效果的说明。

来源:W3Calign-content这个属性比 align-items 和 align-self 稍微复杂一些。
这是规范中的定义:

8.4. Packing Flex Lines: the align-contentproperty

The align-content property aligns a flex container’s lines withinthe flex container when there is extra space in the cross-axis,similar to how justify-content aligns individual items within themain-axis. Note, this property has no effect on a single-line flexcontainer.

与 align-items 和 align-self 相比，它们在其行内移动 flex 元素，align-content 在容器内移动 flex 线。align-content 有六个可能的值:

flex-start

flex-end

center

space-between

space-around

stretch

(有关每个值的说明，请单击上面的规范定义标题。)
下面是行方向容器中每个值的效果的说明。

来源:W3C
为什么 align-content 只能在多行 flex 容器中工作？
在单行 flex 容器中，行的交叉大小等于容器的交叉大小。这意味着线和容器之间没有可用空间。因此， align-content 可能无效。
这是 relevant section from the spec :

Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

第 4 部分:示例说明

在示例#1 中， align-self 与 flex-wrap: nowrap 一起使用，因为 flex 元素存在于单行容器中。因此，有一条 flex 线，它与容器的高度相匹配。

flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}
flex-item:last-child {
  align-self: flex-end;
  background-color: crimson;
}

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

在示例#2 中， align-self 失败，因为它存在于多行容器 ( flex-wrap: wrap ) 中，并且 align-content 设置为 flex-start 。这意味着 flex 线紧紧地挤在横轴的起点，没有为 align-self 工作留下可用空间。

flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}
flex-item:last-child {
  align-self: flex-end;
  background-color: crimson;
}

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

Example #3 的解释与 Example #1 相同。

flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

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

Example #4 的解释与 Example #2 相同。

flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}

flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

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

Example #5 是一个单行容器。因此，柔性线的横向尺寸等于容器的横向尺寸，两者之间没有多余的空间。因此， align-content ，当交叉轴中有额外空间时对齐柔性线，不起作用。

flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  width: 250px;
  height: 250px;
  background-color: silver;
}

flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

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

align-content 的初始设置是 stretch 。这意味着如果没有指定其他值，容器将在 flex 线之间平均分配可用空间。 (当所有 flex 元素都获得 flex: 1 时，在主轴上创建了类似的效果。)
行之间的这种空间分布会导致行/列之间出现很大的间隙。较少的线条会导致较大的间隙。更多的线导致更小的间隙，因为每条线获得的空间份额更小。
要解决此问题，请将 align-content: stretch 切换到 align-content: flex-start 。这将这些行打包在一起(参见上面的示例 #2 和 #4)。当然，这也消除了行中的任何空闲空间， align-items 和 align-self 不再起作用。
这是一个相关的帖子: Remove space (gaps) between multiple lines of flex items when they wrap

flex-container {
  display: flex;
  flex-wrap: wrap;
  /* align-content: center; */
  width: 250px;
  height: 250px;
  background-color: silver;
}

flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

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

正如在前面的例子中所解释的，对于 align-content: stretch ， flex 行中可以有额外的空间，这允许 align-items 和 align-self 工作。 align-content 的任何其他值都会打包行，消除额外空间，并使 align-items 和 align-self 无用。

flex-container {
  display: flex;
  flex-wrap: wrap;
  /* align-content: center; */
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

flex-item:nth-child(even) {
  align-self: flex-end;
  background-color: crimson;
}

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