您现在的位置是:课程教程文章

css中align-self属性是什么

2023-12-13 23:05课程教程文章 人已围观

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属性是什么

上一篇:python异常处理的作用

下一篇:没有了

站点信息

  • 文章统计篇文章