css中align-self属性是什么

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

2、align-self多了个auto（默认值），表示继承自flex容器的align-items属性值。

实例

.container{
/*定义flex容器*/
display:flex;
/*
设置容器内部元素的排列方向
row:定义排列方向从左到右
row-reverse:从右到左
column:从上到下
column-reverse:从下到上
*/
flex-direction:row;

/*
设置容器中元素在交叉轴上的对齐方式
stretch:当元素的高度没有设置，则元素的高度会拉伸至容器高度一致(默认)
flex-start:在交叉轴上向起点位置(向上/向左)对齐
flex-end:在交叉轴上向上结束位置(向下/向右)对齐
center:居中对齐
baseline:保证元素中的文字在同一条基准线(保证每个文字都在同一条线上)
*/

align-items:baseline;

height:800upx;
background-color:#FFC0CB;

}

.txt{
font-size:20px;
width:150upx;
height:150upx;
}

.red{
background-color:red;

/*
重写容器中元素在交叉轴上的对齐方式
auto:默认，表示继承父级元素的align-items属性
stretch:当元素的高度没有设置，则元素的高度会拉伸至容器高度一致(默认)
flex-start:在交叉轴上向起点位置(向上/向左)对齐
flex-end:在交叉轴上向上结束位置(向下/向右)对齐
center:居中对齐
baseline:保证元素中的文字在同一条基准线(保证每个文字都在同一条线上)
*/
align-self:center;
}

.green{
background-color:green;
}

.blue{
background-color:blue;
}

以上就是css中align-self属性的介绍，希望对大家有所帮助。更多css学习指路：css教程

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

课程教程：css中align-self属性是什么

内容版权声明：除非注明，否则皆为本站转载文章。文章及图片版权归原作者所有，如有侵权请联系我们，我们立刻删除。