flex-wrap如何与align-self，align-items和align-content一起使用？

Question 1

`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>

Expand snippet

`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>

Expand snippet

...但不是这里（启用换行）：

显示代码段

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>

Expand snippet

`align-content`

使用时flex-wrap: nowrap，该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>

Expand snippet

但是，奇怪的是，如果启用了自动换行并没有设置自动换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>

Expand snippet

并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>

Expand snippet

如何flex-wrap工作与align-self，align-items和align-content?

Question 2

简短答案

尽管该flex-wrap属性看起来很基础-它控制flex项目是否可以包装-实际上，它对整个flexbox布局具有广泛的影响。

该flex-wrap属性确定您将使用的flex容器的类型。

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

在align-items和align-self两个单和多行容器的属性来工作。但是，只有在折线的交叉轴上有可用空间时，它们才会起作用。

该align-content属性仅在多行容器中起作用。在单行容器中将其忽略。

说明

所述Flexbox的规范提供了用于对准的柔性物品四种关键字属性：

align-items
align-self
align-content
justify-content

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

第1部分：了解Flex容器的主轴和横轴

X和Y轴

flex容器在两个方向上起作用：x轴（水平）和y轴（垂直）。

^{资料来源：维基百科}

flex容器的子元素（称为“ flex项目”）可以在任一方向上对齐。

这是最基本的弹性对齐。

主轴和十字轴

在弹性布局中，重叠的x和y轴是主轴和交叉轴。

默认情况下，主轴为水平（x轴），交叉轴为垂直（y轴）。这是初始设置，由flexbox规范定义。

^{资料来源：W3C}

但是，与固定的x和y轴不同，主轴和横轴可以切换方向。

该flex-direction物业

在上图中，主轴是水平的，而横轴是垂直的。如前所述，这是flex容器的初始设置。

但是，可以使用该flex-direction属性轻松切换这些方向。该属性控制主轴的方向。它确定弹性项目是垂直对齐还是水平对齐。

从规格：

5.1。弹性流向：flex-direction 属性

该flex-direction属性通过设置弹性容器主轴的方向来指定弹性项目在弹性容器中的放置方式。这确定了弹性项目的布置方向。

该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-direction。

一个容器可以有一个或多个行，具体取决于flex-wrap。

单线柔性容器

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>

Expand snippet

多线柔性容器

flex-wrap: wrap或wrap-reverse建立多行flex容器，其中flex项目可以创建新行。

上图有3条折线。

显示代码段

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>

Expand snippet

上图有3条折线。

显示代码段

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>

Expand snippet

第3部分：关键字对齐属性

将属性分配给主轴和十字轴（不是X和Y）

该flex-direction属性控制弹性项目的布置方向，但有四个属性可控制对齐和定位。这些是：

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属性的说明，请参见以下文章：

在CSS Flexbox中，为什么没有“ justify-items”和“ justify-self”属性？

定义

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

align-items
align-self
align-content

`align-items` / `align-self`

该align-items属性将使伸缩项沿伸缩线的交叉轴对齐。它适用于伸缩容器。

该align-self属性用于覆盖align-items单个弹性项目。它适用于弹性项目。

这是规范的定义：

8.3。跨轴对齐：align-items和align-self 属性

伸缩项可以在伸缩容器的当前行的横轴上对齐，类似于justify-content但在垂直方向上。align-items为所有flex容器的项目设置默认对齐方式。align-self允许针对单个弹性项目覆盖此默认对齐方式。

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

flex-start
flex-end
center
baseline
stretch
auto（align-self仅）

（有关每个值的说明，请单击上方的规范定义标题。）

的初始值align-items就是stretch，这意味着弯曲的物品将扩大容器的横轴的整个可用长度。

align-selfis的初始值auto，表示它继承的值align-items。

下面是对行方向容器中每个值的影响的说明。

^{资料来源：W3C}

`align-content`

此属性比align-items和更复杂align-self。

这是规范的定义：

8.4。包装伸缩线：align-content 属性

align-content当横轴上有多余的空间时，此属性会在Flex容器内将Flex容器的线justify-content对齐，类似于在主轴内对齐单个项目的方式。注意，此属性对单行flex容器无效。

在对比align-items和align-self，其移动柔性物品其行内，align-content移动弯曲线在所述容器内。

有以下六个可能的值align-content：

flex-start
flex-end
center
space-between
space-around
stretch

（有关每个值的说明，请单击上方的规范定义标题。）

下面是对行方向容器中每个值的影响的说明。

^{资料来源：W3C}

为什么align-content只在多行伸缩容器中工作？

在单行柔性容器中，线的交叉尺寸等于容器的交叉尺寸。这意味着管线和容器之间没有可用空间。结果，align-content可能没有效果。

这是规范中的相关部分：

只有多行伸缩容器在横轴上才会有用于对齐线的自由空间，因为在单行伸缩容器中，唯一的线会自动拉伸以填充空间。

第四部分：示例解释

在示例1中，之所以align-self可以使用，flex-wrap: nowrap是因为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>

Expand snippet

在示例2中，align-self失败是因为它存在于多行容器（flex-wrap: wrap）中， align-content并且设置为flex-start。这意味着柔线紧紧地包装在横轴的起点，没有剩余的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>

Expand snippet

示例3的解释与示例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>

Expand snippet

示例4的说明与示例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>

Expand snippet

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>

Expand snippet

的初始设置align-content是stretch。这意味着，如果未指定其他值，则容器将在柔性线之间平均分配可用空间。（当所有flex项目都获得时，会在主轴上产生类似的效果flex: 1。）

行之间的这种空间分布会导致行/列之间的较大间隙。更少的行导致更大的差距。越多的行导致的间隙越小，因为每行所占的空间份额较小。

要解决此问题，请从切换align-content: stretch到align-content: flex-start。这会将行打包在一起（请参见上面的示例2和4）。当然，这也消除了线路上的任何可用空间，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-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>

Expand snippet

在前面的例子说明，有align-content: stretch，有可以在弯曲线额外的空间，这使得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>

Expand snippet

Question 3

首先，如果没有换行，则align-content无效：

w3c文件

当横轴上有多余的空间时，align-content属性将伸缩容器内的行对齐在伸缩容器内，类似于证明内容在主轴内对齐单个项目的方式。注意，此属性对单行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-item:nth-child(5) {
  height: 90px;  /* added */
}

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

Expand snippet

同样，在您的第四个示例中，如果设置了可以看到样式的条件，则样式将起作用

显示代码段

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-item:nth-child(2),flex-item:nth-child(5) {
  height: 90px;  /* added */
}

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

Expand snippet

最后，当您注释align-content时，它会恢复为Stretch，这就是为什么这些行会增加大小以填充容器

拉伸线拉伸以占据剩余空间。如果剩余的可用空间为负，则此值与flex-start相同。否则，自由空间会在所有线之间平均分配，从而增加其交叉尺寸。

flex-wrap如何与align-self，align-items和align-content一起使用？

align-self

align-items

align-content

简短答案

说明

第1部分：了解Flex容器的主轴和横轴

第2部分：弹性线

第3部分：关键字对齐属性

align-items / align-self

align-content

第四部分：示例解释

`align-self`

`align-items`

`align-content`

`align-items` / `align-self`

`align-content`