flex-wrap如何与align-self，align-items和align-content一起工作？

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> 

但是，奇怪的是，如果启用了换行并且省略了align-content ，则容器在这些行之间创build了较大的间隔：

 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> 

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

Answer 1

简答

尽pipeflex-wrap属性看起来非常基本 – 它控制着flex项目是否可以换行 – 它实际上对整个flexbox布局有着广泛的影响。

flex-wrap属性确定您将使用的flex容器的types。

• flex-wrap: nowrap创build一个单行flex容器
• flex-wrap: wrap和wrap-reverse创build一个多行flex容器

align-items和align-self属性可以在单行和多行容器中使用。 但是，只有在弹性线的横轴上有空闲空间时才能起作用。

align-content属性仅适用于多行容器。 它在单线容器中被忽略。

---

说明

Flexbox规范提供了四个用于alignmentFlex项目的关键字属性：

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

要理解这些属性的function，首先了解flex容器的结构非常重要。

---

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

X和Y轴

柔性容器在两个方向上工作：x轴（水平）和y轴（垂直）。

^{来源： 维基百科}

柔性容器的子元素 – 被称为“柔性物品” – 可以在任何方向上alignment。

这是在最基本的层面上的弹性alignment。

主轴和十字轴

在x轴和y轴上叠加的是主轴和交叉轴。

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

^{来源： W3C}

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

flex-direction属性

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

但是，这些方向可以很容易地与flex-direction属性切换。 该属性控制主轴的方向; 它决定了flex项目是垂直还是水平排列。

从规格：

5.1。 柔性stream动方向： flex-direction属性

flex-direction属性通过设置柔性容器主轴的方向来指定柔性物体如何放置在柔性容器中。 这决定了flex项目的布局方向。

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

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

单线柔性容器

flex-wrap: nowrapbuild立一个单行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> 

Answer 2

首先，如果没有换行，align-content是无用的：

w3c文档

align-content属性在交叉轴上有额外的空间时，在flex容器内alignment一个flex容器的行，类似于justify-content在主轴内alignment单个项目的方式。 请注意，此属性对单行flex容器没有影响 。

另外，在你的第二个例子中，align-self并没有失败。 这是没用的，因为内线已经被打包了。 让我们创build一个空间，以便风格可以工作：

 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>