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

Question

在下面的代码中，amize-Self与flex-pack： 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-pack： pack时，amize-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>

类似地，为什么对齐项目在此处起作用（已禁用换行）：

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>

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

但是，奇怪的是，如果启用了换行，并且省略了类内容，容器会在这里的行之间创建很大的空白：

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

首先，在没有换行的情况下，line-Content是无用的：

w3c文档

当横轴上有额外的空间时，“对齐内容”属性会对齐flex容器中flex容器的线条，类似于“对齐内容”如何对齐主轴中的各个项目。注意，此属性对单行flex容器没有影响。

另外，在你的第二种情况下，对我自己没有失败。没用，因为内线已经打包好了。让我们创造一个空间，这样风格就可以工作：

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>

Answer 2

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

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

• flex wrap:nowrap创建单行flex容器
• flex-wrap:wrap和wrap-reverse创建多行flex容器

在单行和多行容器中均可使用类项和类项属性。然而，它们只有在柔性线的交叉轴上有自由空间时才能产生效果。

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

flexbox规范提供了四个关键字属性来对齐flex项：

• 对齐项目

要了解这些属性的html" target="_blank">功能，首先了解flex容器的结构非常重要。

X轴和Y轴

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

灵活容器的子元素（称为“灵活项”）可以在任一方向对齐。（忽略上图中的z轴。它不适用于这里。）

这是最基本的flex对齐。

主轴和十字轴

在flex布局中，覆盖x轴和y轴的是主轴和交叉轴。

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

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

灵活方向属性

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

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

根据规范：

5.1. 灵活流动方向：灵活方向属性

属性通过设置flex容器主轴的方向，指定flex项在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;

十字轴总是垂直于主轴。

在容器中，柔性项存在于一条线中，称为“柔性线”。

伸缩线是一行或一列，具体取决于伸缩方向。

一个容器可以有一行或多行，具体取决于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>