CSS详解系列:11-Flex项目属性align-self

fox/ 01月24日/ CSS教程/ 浏览 487

align-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。

允许为单个项目设置不同于其它项目的对齐方式,该属性可以可覆盖align-items属性的值,实际应用中,align-self 属性可重写灵活容器的 align-items 属性。


默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

align-self 属性的可选值如下:

描述
auto默认值,表示元素将继承其父容器的 align-items 属性值,如果没有父容器,则为“stretch”
stretch项目将被拉伸以适合容器
center项目位于容器的中央
flex-start项目位于容器的顶部
flex-end项目位于容器的底部
baseline项目与容器的基线对齐
initial将此属性设置为属性的默认值
inherit从父元素继承属性的值


具体值对应展示效果可参考下图,实际应用中一般搭配 align-items,对某个元素做单独定义,看参考图例最后部分。




发表评论

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

客服 工单