CSS详解系列:07-Flex容器属性align-items

fox/ 01月08日/ CSS教程/ 浏览 980

align-items属性定义项目在交叉轴上如何对齐,用来设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式,属性的可选值如下:


描述
stretch默认值,项目将被拉伸以适合容器
center项目位于容器的中央
flex-start项目位于容器的顶部
flex-end项目位于容器的底部
baseline项目与容器的基线对齐
initial将此属性设置为属性的默认值
inherit从父元素继承属性的值


几个属性值的具体效果如下图所示:

注意:


(1)常理来说justify-content与align-items默认分别处理项目主轴,交叉轴的对齐方式,但如果我们修改了flex-direction为column,它们处理的轴向会交换,也就是justify-content处理交叉轴,align-items处理主轴。


(2)通过给一个父元素设置justify-content:center;和align-items:center;可以使得其子元素垂直水平居中。

发表评论

暂无评论,抢个沙发...

客服 工单