CSS align-items 属性

CSS align-items属性是对齐项目（即flex子项）在交叉轴上对齐方式的属性，即设置在flex容器上。针对交叉轴，其应用范围是flex容器的子项。本文将详细介绍CSS align-items 属性。

语法

flex-start | flex-end | center | baseline | stretch

取值

• flex-start: 交叉轴的起点对齐
• flex-end: 交叉轴的终点对齐
• center: 交叉轴的中点对齐
• baseline: 项目的第一行文字的基线对齐
• stretch: 给项目分配剩余交叉轴空间

注意事项

1. CSS align-items 属性需要和flex-direction属性一起使用来生效。默认值为stretch。
2. 如果子项没有设置固定的尺寸，那么CSS align-items就会拉伸子项以填充flex容器。
3. 如果想要针对个别子项设置不同的对齐方式可以使用align-self属性进行设置，优先级高于align-items。
4. 应该修改flex容器的display属性为flex才能使用CSS align-items属性。

举例说明

实现项目靠右对齐

HTML

<div class="container">
    <div class="item one">1</div>
    <div class="item two">2</div>
    <div class="item three">3</div>
</div>

CSS

.container {
    display: flex;
    align-items: flex-end;
}

在上述代码中，为了实现项目在交叉轴（例如flex容器的高度）上靠右对齐，将align-items属性设置为flex-end。

实现项目垂直居中

HTML

<div class="container">
    <div class="item one">1</div>
    <div class="item two">2</div>
    <div class="item three">3</div>
</div>

CSS

.container {
    display: flex;
    align-items: center;
}

在上述代码中，为了实现项目在交叉轴（例如flex容器的高度）上垂直居中，将align-items属性设置为center。

总结

从上述例子中我们可以看到，CSS align-items属性可以让我们更方便地控制项目的对齐方式。本文中介绍了这个属性的语法，取值、注意事项以及举例说明。精通这个属性，可以更加轻松快捷地实现网页中元素的对齐与排布。