CSS flex layout properties: the difference between align-items and align-content

When using flex for layout, I found that there are two attributes that seem to have similar functions: align-items and CSS flex layout properties: the difference between align-items and align-content. At first glance, They are used to define the cross axis of the elements in the flex container (the main axis is the direction defined by flex-deriction, the default is row, then the cross axis is perpendicular to the main axis, which is the column. Otherwise, they interchange, and flex is basically The concept of alignment is as shown in the figure below), so what is the difference between them?

This article uses example code to study this (flex-direction defaults to horizontal direction, the environment is Google browser: version 72), which is mainly divided into three Part:

① Translate a good answer from stack overflow.

② Use your own code example to show the difference.

③ Summary.

Note: This article is limited to the case where the attribute value is center. Please try other attribute values ​​yourself. [Learning video sharing: css video tutorial, web front-end]

##1. Answer on stack overflow (translation)

See the question for details: https://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-CSS flex layout properties: the difference between align-items and align-content

justfiy-content property can be applied to all flex containers. Its function is to set the alignment of flex items on the main axis. The effects of different values ​​are as follows:
• 
  
align-items property can be applied to all flex containers. Its function is to set the flex items on the cross axis of each flex row. the default alignment. The effects of different values ​​are as follows:
• 
  
CSS flex layout properties: the difference between align-items and align-content
• is only applicable to multi-line flex containers (that is, in flex containers This attribute only has an effect when the child item is more than one row). Its function is to treat the child item as a whole when the flex container has extra space on the cross axis (when the attribute value is: flex-start, flex-end, center ) to align. The effects of different values ​​are as follows:
  In fact, this statement is not very accurate (see the example in Section 2.3). Let’s verify it through the example code below.
  

2. Do it yourself

2.1 The case where the sub-item is a single row

Initial code (the code in the following examples omits the parts that are irrelevant to flex and remain unchanged,

React is used here, so it is className) as follows:

<div className=&#39;flex&#39;>
     <div className=&#39;i1&#39;>1</div>
     <div className=&#39;i2&#39;>2</div>
     <div className=&#39;i3&#39;>3</div>
     <div className=&#39;i4&#39;>4</div>
</div>

corresponds CSS:

.flex {
	width: 500px;
	margin: 10px;
	text-align: center;
	border: 2px solid #9a9a9a;
	display: flex; /* 默认的flex-direction为row，则交叉轴方向为column，即垂直方向*/
}
.flex div {
	width: 100px;
	margin: 5px;
}
.i1 {
	background-color: #ffb685;
	height: 130px;
}
.i2 {
	background-color: #fff7b1;
	height: 50px;
	width: 120px;
}
.i3 {
	background-color: #b1ffc8;
	height: 100px;
}
.i4 {
	background-color: #b1ccff;
	height: 60px;
}

The effect is as follows:

Conclusion: In all flex layouts, there are actually browser default properties here : align-items: normal; and CSS flex layout properties: the difference between align-items and align-content: normal;, the effect is top alignment.

2.1.1 The height of the flex container is not set

Initial state:

.flex {
	display: flex;
}

The effect is as follows:

Conclusion: There is a default attribute align-items: normal;, the effect is top alignment.

• Set

  align-items: center

  ##

  .flex {
  	display: flex;
  	align-items: center;
  }

The effect is as follows:

Conclusion
: You can see that the height of the container is the height of the tallest child, and all the children in a row are centered on the cross axis, which is the height of the child. The center line coincides with the center line of the flex cross axis.

Set

• CSS flex layout properties: the difference between align-items and align-content: center##

  .flex {
  	display: flex; 
  	CSS flex layout properties: the difference between align-items and align-content: center;
  }

  The effect is as follows:

Conclusion: You can see that there is no difference from the initial state, that is, when the flex container does not set a height and the child has only one row,
CSS flex layout properties: the difference between align-items and align-contentAttributes have no effect. 2.1.2 Set height of flex container

Initial state:

.flex {
	height: 500px; /* 给flex容器添加一个高度 */
	display: flex;
}

The effect is as follows:

结论： 与flex容器不设置高度差不多，只是外层容器的高度增加而已。

• 设置 align-items : center

.flex {
	height: 500px;
	display: flex;
	align-items: center;
}

效果如下所示：

结论：可以看到在一行的所有子项全都在交叉轴上居中对齐，与flex容器高度不设置时的效果一样（只不过此时高度最大的子项也居中对齐了）。

• 设置 CSS flex layout properties: the difference between align-items and align-content: center

.flex {
	display: flex;
	CSS flex layout properties: the difference between align-items and align-content: center;
}

效果如下所示：

结论：可以看到，此时CSS flex layout properties: the difference between align-items and align-content: center;并没有起作用，效果与CSS flex layout properties: the difference between align-items and align-content一样。

2.2 子项为多行的情况

CSS flex layout properties: the difference between align-items and align-content：

<div>
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
</div>

对应的CSS：

.flex {
	width: 500px;
	margin: 10px;
	border: 2px solid #9a9a9a;
	text-align: center;
	display: flex;
	flex-wrap: wrap; /* 使flex容器一行放不下子项换行*/
}
.i5 {
	background-color: #c8b1ff;
	height: 40px;
}
.i6 {
	background-color: #ffb1e5;
	height: 80px;
}

效果如下所示：

结论：同单行一样，这里也有浏览器默认的属性：align-items: normal; 和 CSS flex layout properties: the difference between align-items and align-content: normal;，效果为顶部对齐。

2.2.1 flex容器不设置高度

CSS flex layout properties: the difference between align-items and align-content：

.flex {
	display: flex;
	flex-wrap: wrap; 
}

效果如下所示：

结论：默认顶部对齐，每一行的高度为该行子项中高度最大的那个值。

• 设置 align-items : center

.flex {
	display: flex;
	flex-wrap: wrap; 
	align-items: center;
}

效果如下所示：

结论：可以看到各行的子项都在各自行上居中对齐（各行的高度由高度最高的子项决定，flex容器的高度为所有行的高度最高的子项高度之和）。

• 设置 CSS flex layout properties: the difference between align-items and align-content: center

.flex {
	display: flex;
	flex-wrap: wrap; 
	CSS flex layout properties: the difference between align-items and align-content: center;
}

效果如下所示：

结论：与CSS flex layout properties: the difference between align-items and align-content一样，CSS flex layout properties: the difference between align-items and align-content: center并没有起作用，因为此时是以所有子项作为一个整体，而flex容器并没有指定高度（flex容器的高度即为子项整体的最大高度），所以flex容器在交叉轴上没有多余的空间，那么子项整体自然而然也就没有在交叉轴上对齐的说法了。

2.2.2 flex容器设置高度

CSS flex layout properties: the difference between align-items and align-content：

.flex {
	height: 500px;
	display: flex;
	flex-wrap: wrap; 
}

效果如下所示：

结论：由浏览器的默认值确定。

• 设置 align-items : center

.flex {
	height: 500px;
	display: flex;
	flex-wrap: wrap; 
	align-items: center;
}

效果如下所示：

结论：这里我们可以看出，子项分为2行，flex容器将交叉轴上的多余空间按行数平均分给每行，然后每行各自按自己所在的行居中对齐（此时的单行效果跟2.1.2中的例子1效果一样）

• 设置 CSS flex layout properties: the difference between align-items and align-content: center

.flex {
	height: 500px;
	display: flex;
	flex-wrap: wrap; 
	CSS flex layout properties: the difference between align-items and align-content: center;
}

效果如下所示：

结论：我们可以看到，在flex容器指定高度并且子项为多行时，CSS flex layout properties: the difference between align-items and align-content: center是将子项作为一个整体，然后这个整体在flex容器的交叉轴上居中对齐的。

2.3 补充

以上为什么要区分flex容器是否有固定高度是因为有一种特殊的情况，即：当子项为单行，flex容器具有固定的高度并且设置了flex-wrap: wrap;时，CSS flex layout properties: the difference between align-items and align-content: center;对单行的子项也有作用。

<div className=&#39;flex&#39;>
     <div className=&#39;i1&#39;>1</div>
     <div className=&#39;i2&#39;>2</div>
     <div className=&#39;i3&#39;>3</div>
     <div className=&#39;i4&#39;>4</div>
</div>

.flex {
	height: 500px;
	display: flex;
	flex-wrap: wrap; 
	CSS flex layout properties: the difference between align-items and align-content: center;
}

效果如下所示：

结论：可以看到此时，CSS flex layout properties: the difference between align-items and align-content: center;将单行的子项作为一个整体在交叉轴居中了。

3. 总结

如下表：

条件		属性（是否有效果）
子项	flex容器	align-items	CSS flex layout properties: the difference between align-items and align-content
单行	不指定高度	是	否
	固定高度	是	否（但是有设置flex-wrap:wrap;时，有效果）
多行	不指定高度	是	否
	固定高度	是	是

结论：从上表可知，对于align-items和CSS flex layout properties: the difference between align-items and align-content的区别，我们只需要记住以下两点，

• align-items属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，在所有情况下都有效果（当然要看具体的属性值）。

• CSS flex layout properties: the difference between align-items and align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行，只在两种情况下有效果：①子项多行且flex容器高度固定 ②子项单行，flex容器高度固定且设置了flex-wrap:wrap;

这里有个flex布局的小教程，感兴趣的同学可以玩玩：http://flexboxfroggy.com/

注：这里的高度固定的意思实际上是让flex容器在交叉轴上有多余的空间。

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of CSS flex layout properties: the difference between align-items and align-content. For more information, please follow other related articles on the PHP Chinese website!