实现 Stretch 的 Align-Content 属性
在这一步中,你将探索 align-content: stretch
属性,这是多行 flex 容器的默认行为。打开你的 index.html
文件,并更新 .flex-container
的 CSS,显式设置 stretch 对齐方式:
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
border: 2px solid #333;
background-color: #f0f0f0;
align-content: stretch; /* 显式设置 stretch 对齐方式 */
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4CAF50;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
</style>
align-content: stretch
属性的作用如下:
- 在 flex 行之间和周围均匀分配额外空间
- 拉伸 flex 行以填充容器的交叉轴
- 确保 flex 项目扩展以使用容器的全部高度
- 这是存在多行时的默认行为
示例输出可视化:
[Flex 容器中的项目被拉伸以填充可用的垂直空间]
+-------------------+
| Item 1 Item 2 |
| Item 3 Item 4 |
| Item 5 Item 6 |
+-------------------+
需要理解的关键点:
align-content
控制 flex 行的对齐方式
stretch
是多行 flex 容器的默认值
- 它确保 flex 行使用容器的全部高度
- 有助于创建响应式且均匀分布的布局