align-items是什么属性
时间: 2025-04-26 22:08:53 浏览: 84
`align-items` 是 CSS Flexbox 布局模型中的一个重要属性,用于控制弹性容器(flex container)内所有弹性项目的交叉轴(cross axis)上的对齐方式。简单来说,它决定了子元素在它们所在行的高度方向上如何排列。
**语法**
```css
.container {
display: flex; /* 必须先将父级设为Flex布局 */
align-items: value;
}
```
其中 `value` 的取值有以下几个选项:
- **stretch(默认值)**: 弹性项目将会拉伸以适应容器高度。
- **flex-start**: 子项位于交叉起始线处开始堆叠。对于水平放置的主轴而言,这会使子项顶部对齐;如果是垂直排列,则左边对齐。
- **flex-end**: 和上面相反,意味着子项会停靠在线条结束的地方,在水平布局中底部对齐,在垂直布局右边对齐。
- **center**: 所有的子项都将在中心位置沿交叉轴居中显示。
- **baseline**: 根据文本基线对齐各子项。当一行中有多种字体大小时尤为有用,保证文字底线平齐。
#### 示例代码
假设我们有一个简单的 HTML 结构:
```html
<div class="container">
<div>Item 1</div>
<div>Item 2<br/>Line Break</div>
<div>Item 3</div>
</div>
```
我们可以利用 CSS 来调整这些 div 元素在 `.container` 容器里的垂直对齐效果:
```css
.container {
display: flex;
height: 200px; /* 给定固定高度以便观察变化 */
/* 设置不同的align-items值来进行对比 */
align-items: center;
}
/* 或者其他配置如 baseline、flex-start 等等...*/
```
在这个例子中,“center”会让所有的三个 item 水平分布并且上下居中于其所在的那一行之中。
请注意,如果想要对单个项目单独设置对其规则,应该考虑使用 `align-self` 属性而不是更改整个盒子的所有成员的行为模式。
阅读全文
相关推荐




















