当前位置：theitroad>CSS flex-wrap 如何与 align-self、align-items 和 align-content 配合使用？

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/42613359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 12:27:18 　来源:igfitidea点击:

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

cssflexbox

提问by Michael Benjamin

align-self

align-self

In the following code, align-selfworks with flex-wrap: nowrap.

在以下代码中，align-self使用flex-wrap: nowrap.

enter image description here

在此处输入图片说明

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>

But when the container is switched to flex-wrap: wrap, the align-selfproperty fails.

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

enter image description here

在此处输入图片说明

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

Similarly, why does align-itemswork here (wrap disabled):

同样，为什么在align-items这里工作（禁用包装）：

enter image description here

在此处输入图片说明

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>

...but not here (wrap enabled):

...但不是在这里（启用包装）：

enter image description here

在此处输入图片说明

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

align-content

With flex-wrap: nowrap, the align-contentproperty will not vertically center flex items here:

使用flex-wrap: nowrap，该align-content属性不会在此处垂直居中 flex 项目：

enter image description here

在此处输入图片说明

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>

But then, strangely, if wrap is enabled and align-contentis left out, the container creates wide gaps between rows here:

但是，奇怪的是，如果 wrap 被启用并被align-content排除在外，容器会在此处的行之间产生很大的间隙：

enter image description here

在此处输入图片说明

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>

And align-selfworks again.

并align-self再次工作。

enter image description here

在此处输入图片说明

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-wrapwork with align-self, align-itemsand align-content?

如何flex-wrap使用align-self,align-items和align-content?

回答by Michael Benjamin

Short Answer

简答

Although the flex-wrapproperty seems pretty basic – it controls whether flex items can wrap – it actually has a wide-ranging impact on the entire flexbox layout.

虽然这个flex-wrap属性看起来很基础——它控制着 flex 项目是否可以包装——但它实际上对整个 flexbox 布局有广泛的影响。

The flex-wrapproperty determines the type of flex container you will use.

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

  • flex-wrap: nowrapcreates a single-line flex container
  • flex-wrap: wrapand wrap-reversecreate a multi-line flex container
  • flex-wrap: nowrap创建一个单行 flex 容器
  • flex-wrap: wrap并wrap-reverse创建一个多行 flex 容器

The align-itemsand align-selfproperties work in both single- and multi-line containers. However, they can only have an effect when there's free space in the cross axis of the flex line.

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

The align-contentproperty works only in multi-line containers. It is ignored in single-line containers.

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

Explanation

解释

The flexbox specificationprovides four keyword properties for aligning flex items:

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

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

To understand the functions of these properties it's important to first understand the structure of a flex container.

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

Part 1: Understanding the Main Axis and Cross Axis of a Flex Container

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

The X and Y Axes

X 轴和 Y 轴

A flex container works in two directions: x-axis (horizontal) and y-axis (vertical).

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

x-axis and the y-axis

x 轴和 y 轴

                                                                                                                Source: Wikipedia

                                                                                                                资料来源：维基百科

The child elements of a flex container – known as "flex items" – can be aligned in either direction.

弹性容器的子元素——称为“弹性项目”——可以在任一方向对齐。

This is flex alignment at its most fundamental level.

这是最基本的 flex 对齐。

The Main and Cross Axes

主轴和交叉轴

Overlaying the x and y axes are, in flex layout, the mainand crossaxes.

覆盖所述x和y轴是，在弯曲布局，主要和交叉轴。

By default, the main axis is horizontal (x-axis), and the cross axis is vertical (y-axis). That's the initial setting, as defined by the flexbox specification.

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

flex main axis and cross axis

flex 主轴和交叉轴

                                                                                                                Source: W3C

                                                                                                                资料来源：W3C

However, unlike the x and y axes, which are fixed, the main and cross axes can switch directions.

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

The flex-directionProperty

该flex-direction物业

In the image above, the main axis is horizontal and the cross axis is vertical. As mentioned earlier, that's an initial setting of a flex container.

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

However, these directions can be easily switched with the flex-directionproperty. This property controls the direction of the main axis; it determines whether flex items align vertically or horizontally.

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

From the spec:

从规范：

5.1. Flex Flow Direction: the flex-directionproperty

The flex-directionproperty specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction in which flex items are laid out.

5.1. Flex Flow Direction：flex-direction属性

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

There are four values for the flex-directionproperty:

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;

The cross axis is always perpendicular to the main axis.

横轴总是垂直于主轴。

Part 2: Flex Lines

第 2 部分：柔性线

Within the container, flex items exist in a line, known as a "flex line".

在容器内，弹性项目存在于一行中，称为“弹性线”。

A flex line is a row or column, depending on flex-direction.

弹性线是一行还是一列，取决于flex-direction.

A container can have one or more lines, depending on flex-wrap.

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

Single-Line Flex Container

单行 Flex 容器

flex-wrap: nowrapestablishes a single-line flex container, in which flex items are forced to stay in a single line (even if they overflow the container).

flex-wrap: nowrap建立一个单行 flex 容器，其中 flex 项目被强制留在一行中（即使它们溢出容器）。

a single-line flex container (one column)

单行 flex 容器（一列）

The image above has one flex line.

上图有一条柔性线。

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>

Multi-Line Flex Container

多行 Flex 容器

flex-wrap: wrapor wrap-reverseestablishes a multi-line flex container, in which flex items can create new lines.

flex-wrap: wrap或者wrap-reverse建立一个多行的弹性容器，弹性项目可以在其中创建新行。

multi-line flex container (3 columns)

多行 flex 容器（3 列）

The image above has three flex lines.

上图有 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>

multi-line flex container (3 rows)

多行 flex 容器（3 行）

The image above has three flex lines.

上图有 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>

Part 3: Keyword Alignment Properties

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

Properties are Assigned to the Main and Cross (not X and Y) Axes

属性被分配给主轴和交叉（不是 X 和 Y）轴

While the flex-directionproperty controls the direction in which flex items are laid out, there are four properties that control alignment and positioning. These are:

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

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

Each one of these properties is permanently assigned to an axis.

这些属性中的每一个都永久分配给一个轴。

The justify-contentproperty works only in the main axis.

该justify-content属性仅适用于主轴。

The three align-*properties work only in the cross axis.

这三个align-*属性仅适用于交叉轴。

It's a common mistake to assume that these properties are fixed to the x and y axes. For example, justify-contentis always horizontal, and align-itemsis always vertical.

假设这些属性固定在 x 和 y 轴上是一个常见的错误。例如，justify-content始终是水平的，并且align-items始终是垂直的。

However, when flex-directionis switched to column, the main axis becomes the y-axis, and justify-contentworks vertically.

但是，当flex-direction切换到 时column，主轴变为 y 轴，并justify-content垂直工作。

The focus of this post is cross-axis alignment. For an explanation of main-axis alignment and the justify-contentproperty, see this post:

这篇文章的重点是跨轴对齐。有关主轴对齐和justify-content属性的说明，请参阅此帖子：

Definitions

定义

The flexbox specification provides three keyword properties for cross-axis alignment:

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

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

align-items/ align-self

align-items/ align-self

The align-itemsproperty aligns flex items along the cross axis of the flex line. It applies to flex containers.

该align-items属性沿弹性线的交叉轴对齐弹性项目。它适用于弹性容器。

The align-selfproperty is used to override align-itemson individual flex items. It applies to flex items.

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

Here's the definition from the spec:

这是规范中的定义：

8.3. Cross-axis Alignment: the align-itemsand align-selfproperties

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-contentbut in the perpendicular direction. align-itemssets the default alignment for all of the flex container's items. align-selfallows this default alignment to be overridden for individual flex items.

8.3. 横轴对齐：align-items和align-self属性

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

There are six possible values for align-items/ align-self:

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

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
  • auto(align-selfonly)
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
  • auto（align-self仅）

(For a description of each value, click on the spec definition heading above.)

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

The initial value of align-itemsis stretch, meaning flex items will expand the full available length of the container's cross axis.

的初始值align-items是stretch，这意味着弹性项目将扩展容器横轴的全部可用长度。

The initial value of align-selfis auto, meaning it inherits the value of align-items.

的初始值align-self是auto，意味着它继承了 的值align-items。

Below is an illustration of the effect of each value in a row-direction container.

下面是行方向容器中每个值的效果的说明。

align-items align-self values

align-items align-self 值

                                                                                                                source: W3C

                                                                                                                来源：W3C

align-content

align-content

This property is slightly more complex than align-itemsand align-self.

此属性比align-items和稍微复杂一些align-self。

Here's the definition from the spec:

这是规范中的定义：

8.4. Packing Flex Lines: the align-contentproperty

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

8.4. 包装 Flex Lines：align-content属性

align-content当横轴中有额外空间时，该属性会在 flex 容器内对齐 flex 容器的线条，类似于如何justify-content在主轴内对齐单个项目。请注意，此属性对单行 flex 容器没有影响。

In contrast to align-itemsand align-self, which move flex items within their line, align-contentmoves flex lines within the container.

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

There are the six possible values for align-content:

有六个可能的值align-content：

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

(For a description of each value, click on the spec definition heading above.)

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

Below is an illustration of the effect of each value in a row-direction container.

下面是行方向容器中每个值的效果的说明。

enter image description here

在此处输入图片说明

                                                                                                                source: W3C

                                                                                                                来源：W3C

Why does align-contentwork only in multi-line flex containers?

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

In a single-line flex container, the cross size of the line is equal to the cross size of the container. This means there is no free space between the line and the container. As a result, align-contentcan have no effect.

在单行 flex 容器中，行的交叉大小等于容器的交叉大小。这意味着线和容器之间没有可用空间。结果，align-content可以没有效果。

Here's the 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.

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

Part 4: Examples Explained

第 4 部分：示例说明

enter image description here

在此处输入图片说明

In Example #1, align-selfworks with flex-wrap: nowrapbecause the flex items exist in a single-line container. Therefore, there is one flex line and it matches the height of the container.

在示例 #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>

enter image description here

在此处输入图片说明

In Example #2, align-selffails because it exists in a multi-line container (flex-wrap: wrap) andalign-contentis set to flex-start. This means that flex lines are packed tightly to the start of the cross axis, leaving no free space for align-selfto work.

在示例 #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>

enter image description here

在此处输入图片说明

The explanation for Example #3 is the same as for Example #1.

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>

enter image description here

在此处输入图片说明

The explanation for Example #4 is the same as for Example #2.

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>

enter image description here

在此处输入图片说明

Example #5 is a single-line container. As such, the cross size of the flex line equals the cross size of the container, leaving no extra space between the two. Therefore, align-content, which aligns flex lines when there is extra space in the cross axis, is having no effect.

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>

enter image description here

在此处输入图片说明

The initial setting for align-contentis stretch. This means that if no other value is specified, the container will distribute available space evenly among flex lines. (A similar effect is created on the main axis when all flex items get flex: 1.)

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

This distribution of space among lines can cause wide gaps between rows / columns. Less lines result in wider gaps. More lines result in smaller gaps, as each line gets a smaller share of the space.

行之间的这种空间分布会导致行/列之间出现很大的间隙。较少的线条会导致较大的间隙。更多的线导致更小的间隙，因为每条线获得的空间份额更小。

To resolve this problem switch from align-content: stretchto align-content: flex-start. This packs the lines together (see examples #2 and #4 above). Of course, this also eliminates any free space in the line, and align-itemsand align-selfcan no longer work.

要解决此问题，请从 切换align-content: stretch到align-content: flex-start。这将这些行打包在一起（参见上面的示例 #2 和 #4）。当然，这也消除了行中的任何可用空间，align-items并且align-self不能再工作。

Here's a related post: Remove space (gaps) between multiple lines of flex items when they wrap

这是一篇相关的文章：在多行 flex 项目包装时删除它们之间的空间（间隙）

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>

enter image description here

在此处输入图片说明

As explained in previous examples, with align-content: stretch, there can be extra space in the flex lines, which allows align-itemsand align-selfto work. Any other value for align-contentwould pack the lines, eliminating extra space, and making align-itemsand align-selfuseless.

正如在前面的例子中所解释的，使用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>

回答by vals

First of all, align-content is useless if there is no wrap:

首先，如果没有 wrap， align-content 是没有用的：

w3c doc

w3c 文档

The align-content property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effecton a single-line flex container.

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

Also, in your second case, align-self is not failing. It's useless because the inner lines have been packed. Let's create an space so that the style can work:

此外，在您的第二种情况下， 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>

Similarly, in your 4th example, the style is working, if you set the conditions where it can be seen

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

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>

Finally, when you comment the align-content, it reverts to stretch, that's why the lines increase the size to fill up the container

最后，当您评论 align-content 时，它会恢复为stretch，这就是为什么线条会增加大小以填满容器

stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

伸展线伸展以占用剩余空间。如果剩余可用空间为负，则该值与 flex-start 相同。否则，自由空间会在所有行之间平均分配，从而增加它们的交叉大小。

相关推荐

如何使用另一种样式扩展 css 类？

如何使用另一种样式扩展 css 类？

CSS Bootstrap 4，如何将按钮居中对齐？

CSS Bootstrap 4，如何将按钮居中对齐？

CSS 如何向基于 create-react-app 的项目添加字体？

CSS 如何向基于 create-react-app 的项目添加字体？

CSS 不和谐的颜色文本

CSS 不和谐的颜色文本

相关推荐
最近更新
标签