css – flex-wrap如何使用align-self,align-items和align-content？

对齐自

在以下代码中,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在这里工作(wrap disabled)：

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>

…但不在这里(wrap enabled)：

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>

但是奇怪的是,如果启用了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>

并对齐自己的工作.

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?

解决方法

简答

虽然flex-wrap属性似乎很基本 – 它控制flex项目是否可以包装 – 它实际上对整个FlexBox布局有着广泛的影响.

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

> flex-wrap：nowrap创建一个单行的Flex容器
> flex-wrap：wrap和wrap-reverse创建一个多行的flex容器

对齐项和对齐自身属性可用于单行和多行容器.但是,当柔性线的交叉轴上有自由空间时,它们只能起作用.

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

说明

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

>对齐项
align-self
>对齐内容
证明内容

要了解这些属性的功能,首先要了解Flex容器的结构很重要.

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

X和Y轴

Flex容器在两个方向上工作：x轴(水平)和y轴(垂直).

资料来源：Wikipedia

Flex容器的子元素(称为“flex items”)可以在任一方向对齐.

这是最根本的弯曲对齐.

主轴和十字轴

在弹性布局中,叠加x和y轴的主轴和横轴.

默认情况下,主轴为水平(x轴),横轴为垂直(y轴).这是flexbox specification定义的初始设置.

资料来源：W3C

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

弹性方向属性

在上图中,主轴是水平的,交叉轴是垂直的.如前所述,这是Flex容器的初始设置.

然而,这些方向可以容易地用挠性方向转换.该属性控制主轴的方向;它确定柔性物品是垂直还是水平对齐.

从规格：

07006

The flex-direction property 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.

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-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项可以创建新行.

上面的图像有三条弯曲线.

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>

上面的图像有三条弯曲线.

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属性控制布局弹性项目的方向时,有四个属性控制对齐和定位.这些是：

>对齐项
align-self
>对齐内容
证明内容

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

justify-content属性只适用于主轴.

三个align- *属性仅在十字轴上工作.

假设这些属性固定在x轴和y轴上是一个常见的错误.例如,对齐内容总是水平的,对齐项总是垂直的.

但是,当弹性方向切换到列时,主轴成为y轴,对齐内容垂直.

这个帖子的重点是跨轴对齐.有关主轴对齐和对齐内容属性的说明,请参阅此帖：

> In CSS Flexbox,why are there no “justify-items” and “justify-self” properties?

定义

flexBox规范为交叉轴对齐提供了三个关键字属性：

>对齐项
align-self
>对齐内容

align-items / align-self

对齐项目属性沿着柔性线的横轴对齐柔性项.它适用于柔性容器.

align-self属性用于覆盖各个flex项目上的对齐项.它适用于柔性物品.

这是从规范的定义：

070011

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

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

> flex-start
> flex-end
>中心
>基线
拉伸
> auto(仅适用于align-self)

(有关每个值的描述,请点击上面的规格定义标题.)

对齐项目的初始值为拉伸,这意味着弹性项目将扩展容器横轴的完整可用长度.

align-self的初始值为auto,表示它继承了align-items的值.

以下是每个值在行方向容器中的影响的图示.

来源：W3C

对齐内容

这个属性比align-items和align-self稍微复杂一点.

这是从规范的定义：

070014

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 effect on a single-line flex
container.

与对齐项和对齐自身相反,对齐内容会移动其行内的项目,对齐内容会移动容器内的柔性线.

对齐内容有六个可能的值：

> flex-start
> flex-end
>中心
>空格之间
>空间
拉伸

(有关每个值的描述,请点击上面的规格定义标题.)

以下是每个值在行方向容器中的影响的图示.

来源：W3C

为什么对齐内容仅在多行Flex容器中工作？

在单线柔性容器中,线的交叉尺寸等于容器的交叉尺寸.这意味着线和容器之间没有可用空间.因此,对齐内容可能无效.

这是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-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中,对齐自身失败,因为它存在于多行容器(flex-wrap：wrap)中,并且align-content设置为flex-start.这意味着柔性线被紧密包装到交叉轴的开始处,没有留下空间用于对准自身工作.
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>
示例#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>
示例#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>
示例#5是单行容器.因此,柔性线的交叉尺寸等于容器的交叉尺寸,在两者之间不留下额外的空间.因此,当在交叉轴上有额外的空间时,对准内容(对齐内容)对齐柔性线,没有任何作用.
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>
对齐内容的初始设置是拉伸.这意味着如果没有指定其他值,容器将在弹性线之间均匀分配可用空间. (当所有弹性项目变为柔性时,在主轴上产生类似的效果：1.)

线之间的空间分配可能导致行/列之间的宽间隙.较少的线条导致更广泛的差距.更多的线会导致更小的间隙,因为每条线都占用较小的空间.

要解决此问题,请从align-content：stretch转换为align-content：flex-start.这样将线条包在一起(见上面的例子#2和#4).当然,这样做也可以消除线路中的任何可用空间,并且对齐项目和对齐方式不能再起作用.

这是一个相关的帖子：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行中可以有额外的空间,这样可以使对齐项和对齐自身工作.对齐内容的任何其他值将打包行,消除额外的空间,并使对齐项和对齐自身无用.
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>

原文链接：https://www.f2er.com/css/216681.html

css – flex-wrap如何使用align-self,align-items和align-content？

解决方法

猜你在找的CSS相关文章