css align-items属性怎么用？

PHP中文网 • 2025年3月10日 21:13:16 • 编程技术 • 阅读 1

css align-items属性是用于指定float容器内项目在横轴方向的对齐方式，其语法是“align-items: stretch|center|flex-start|flex-end|baseline;”。

css align-items属性是用于指定float容器内项目在横轴方向的对齐方式：拉伸以填充容器、以横轴为中心、在顶部垂直对齐、在底部垂直对齐、横轴的基线处对齐。【视频教程推荐：CSS教程】

CSS align-items属性

align-items属性是Flexible Box 布局模块的子属性。

作用：定义了如何沿当前行的横轴布置弹性项目的默认（对齐）行为。

立即学习“前端免费学习笔记（深入）”；

注：可以在float容器内的每个子项目中使用align-self属性来覆盖align-items属性的样式。

语法：

align-items: stretch|center|flex-start|flex-end|baseline;

登录后复制

stretch（默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）。

center：项目以横轴为中心；默认情况下，横轴是垂直的，这意味着flexbox项目将垂直居中。

flex-start：项目在横轴的开始处对齐，即项目将在顶部垂直对齐。

flex-end：项目在横轴末端对齐，即项目将在底部垂直对齐

baseline：项目在横轴的基线处对齐，即flexbox项目将自身对齐，以使其文本的基线沿水平线对齐。

CSS align-items属性的使用示例

nbsp;html>.flex-container {padding: 0;margin: 0;list-style: none;-ms-box-orient: horizontal;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -moz-flex;display: -webkit-flex;display: flex;float: left;}.flex-start {-webkit-align-items: flex-start;align-items: flex-start;}.flex-end {-webkit-align-items: flex-end;align-items: flex-end;}.flex-end li {background: gold;}.center {-webkit-align-items: center;align-items: center;}.center li {background: deepskyblue;}.baseline {-webkit-align-items: baseline;align-items: baseline;}.baseline li {background: lightgreen;}.stretch {-webkit-align-items: stretch;align-items: stretch;}.stretch li {background: hotpink;}.flex-item {background: tomato;padding: 5px;width: 50px;margin: 5px;line-height: 50px;color: white;font-weight: bold;font-size: 2em;text-align: center;}1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6