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
: 给项目分配剩余交叉轴空间
注意事项
- CSS align-items 属性需要和flex-direction属性一起使用来生效。默认值为stretch。
- 如果子项没有设置固定的尺寸,那么CSS align-items就会拉伸子项以填充flex容器。
- 如果想要针对个别子项设置不同的对齐方式可以使用align-self属性进行设置,优先级高于align-items。
- 应该修改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属性可以让我们更方便地控制项目的对齐方式。本文中介绍了这个属性的语法,取值、注意事项以及举例说明。精通这个属性,可以更加轻松快捷地实现网页中元素的对齐与排布。