一、基本概念
align-items是指定义在flex容器上的属性，用于控制flex子元素在flex容器中的垂直对齐方式。该属性定义了在交叉轴（Cross Axis）上，如果存在多个子元素，如何对其进行对齐。
align-items的常见取值为flex-start（在容器交叉轴的起始位置对齐）、flex-end（在容器交叉轴的结束位置对齐）、center（在容器交叉轴的中心位置对齐）、stretch（默认状态，将子元素在交叉轴方向上拉伸填充满容器交叉轴空间）等。
二、实现垂直居中
在flex布局中，在父元素上设置display:flex可以使子元素按照一定的规则进行排列。如果想要实现垂直居中，除了设置flex-direction: column使子元素从上往下排列外，还可以设置align-items:center属性。
.parent{
display:flex;
flex-direction:column;
align-items:center;
}
上述代码中，flex-direction: column是让子元素从上往下排列的属性，而align-items:center属性是垂直居中的实现方式。
三、实现底部对齐
通过设置align-items:flex-end属性可以将子元素放在容器的底部。
.parent{
display:flex;
flex-direction:column;
align-items:flex-end;
}
上述代码中，flex-direction: column是让子元素从上往下排列的属性，而align-items:flex-end则让子元素对齐到容器的底部。
四、实现左对齐
除了实现垂直居中、底部对齐，align-items属性还可以用于实现左对齐。
.parent{
display:flex;
align-items:flex-start;
}
上述代码中，align-items:flex-start属性将子元素向左对齐，因为flex-direction默认为row。
五、实现上对齐
通过调整容器高度，可以实现子元素上对齐。在父元素上设置align-items:flex-start属性，子元素设置高度为100%即可。
.parent{
display:flex;
align-items:flex-start;
height:200px;
}
.child{
height:100%;
}
六、总结
align-items是用于控制flex子元素在flex容器中的垂直对齐方式的属性，常见取值为flex-start、flex-end、center、stretch等。通过设置不同的取值，可以实现垂直居中、底部对齐、左对齐、上对齐等效果。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/292003.html
微信扫一扫 
支付宝扫一扫 