前言
今天在写组件，使用flex属性来定位元素时，遇到了怎么改align-content都无法实现内容居中的效果，于是参考了W3C的有关文档，理解了为何要设置align-items和align-content两个属性来实现对子元素的定位。 以下是为了区分这两个属性而做的简单应用场景示例笔记。
align-items 与 align-content 的应用场景
简单区分
两个属性都不作用于定义了该属性的元素本身，一般将其定义为容器属性，即父元素的属性。
同样的，他们都作用于父元素下的子元素，只不过align-item会根据父元素的空间去为父元素下的每一行元素定位。而align-content则是将父元素下的所有子元素作为一个整体，再根据父元素的空间去定位。
这么讲很绕，不如直接看示例与结果。
我们只讨论父元素均能包含所有子元素的情况，这用来区分两个属性的差别，已经足够了。
align-items 实例
align-items定位时，作用于容器内的每一行，其默认值为stretch
单行
当容器内只有一行时，例如
flex-wrap: nowrap的情况
stretch 模式下，会自动将单行内未定义高度的元素拉升至父元素高度
<div
style="
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 100px;
color: #409eff;
background: #d9ecff;
margin: 0;
box-shadow: 0 0 0 10px #79bbff;
"
>
<span style="display: flex; background: #a0cfff">Test1</span>
<p style="display: flex; margin: 0; background: #a0cfff">Test1</p>
<span style="display: flex; background: #a0cfff; height: 50px"
>Test2</span
>
<p style="display: flex; margin: 0; background: #a0cfff; height: 50px">
Test2
</p>
</div>Test1
Test2Test2
而 center 模式下，行内元素则不会自动拉升高度，此时若行内元素小于父元素高度,即元素与父元素边界存在距离时，则会自动补全空白并按轴线居中。center 其实就是让元素位于补全的空白中间。
<div
style="
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items:center;
height: 100px;
color: #409eff;
background: #d9ecff;
margin: 0;
box-shadow: 0 0 0 10px #79bbff;
"
>
<span style="display: flex; background: #a0cfff">Test1</span>
<p style="display: flex; margin: 0; background: #a0cfff">Test1</p>
<span style="display: flex; background: #a0cfff; height: 50px"
>Test2</span
>
<p style="display: flex; margin: 0; background: #a0cfff; height: 50px">
Test2
</p>
</div>Test1
Test2Test2
多行
当 align-items 用于多行定位时，由于其作用对象是容器内的每一行，此时若align-items:center，则父元素会先按照行数均分高度，然后让子元素在各自的均分高度内居中
<div
style="
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
height: 120px;
color: #409eff;
background: #d9ecff;
margin: 0;
box-shadow: 0 0 0 10px #79bbff;
"
>
<p
style="
display: flex;
width: 100%;
height: 20px;
background: #a0cfff;
margin: 0;
"
>
line 1
</p>
<p
style="
display: flex;
width: 100%;
height: 20px;
background: #a0cfff;
margin: 0;
"
>
line 2
</p>
<p
style="
display: flex;
width: 100%;
height: 20px;
background: #a0cfff;
margin: 0;
"
>
line 3
</p>
</div>line 1
line 2
line 3
align-content 实例
align-content定位时，会将容器内的所有子元素视为一个整体，然后再定位他们
<div
style="
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
height: 120px;
color: #409eff;
background: #d9ecff;
margin: 0;
box-shadow: 0 0 0 10px #79bbff;
"
>
<p
style="
display: flex;
width: 100%;
height: 20px;
background: #a0cfff;
margin: 0;
"
>
line 1
</p>
<p
style="
display: flex;
width: 100%;
height: 20px;
background: #a0cfff;
margin: 0;
"
>
line 2
</p>
<p
style="
display: flex;
width: 100%;
height: 20px;
background: #a0cfff;
margin: 0;
"
>
line 3
</p>
</div>line 1
line 2
line 3
可以看到所有子元素抱团了
总结
align-items 定位每一行
align-content 定位所有子元素构成的整体
