本文发布于 2023-01-17， 最后更新于 1317 天前，其中的信息可能已经有所发展或是发生改变。
文章摘要
前言 今天在写组件，使用flex属性来定位元素时，遇到了怎么改 align-content 都无法实现内容居中的效果，于是参考了W3C的有关文档，理解了为何要设置 align-items 和 align-content 两个属性来实现对子元素的定位。 以下是为了区分这两个属性而做的简单应用场景示例笔记。 align-items 与 align-content 的应用场景 简单区分 两个属性都不作用…
前言 今天在写组件，使用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 Test1 Test2 Test2 而 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 Test1 Test2 Test2 多行 当 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 定位所有子元素构成的整体 参考： CSS Box Alignment Module Level 3 (w3.org)前言
今天在写组件，使用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 模式下，会自动将单行内未定义高度的元素拉升至父元素高度
yaml (Auto identified)
<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
Test1
Test2Test2
而 center 模式下，行内元素则不会自动拉升高度，此时若行内元素小于父元素高度,即元素与父元素边界存在距离时，则会自动补全空白并按轴线居中。center 其实就是让元素位于补全的空白中间。
yaml (Auto identified)
<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
Test1
Test2Test2
多行
当 align-items 用于多行定位时，由于其作用对象是容器内的每一行，此时若align-items:center，则父元素会先按照行数均分高度，然后让子元素在各自的均分高度内居中
yaml (Auto identified)
<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 定位时，会将容器内的所有子元素视为一个整体，然后再定位他们
yaml (Auto identified)
<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 定位所有子元素构成的整体
本文采用 CC BY-NC-SA 4.0 协议进行授权，如无注明均为原创，转载请注明出处。
标题：align-content 不生效？区分align-content和align-items作者：九仞之行链接：http://dev.styunlen.cn/archives/post-1562.html
还没有评论呢 ~ 快来抢沙发吧 🛋️