您现在的位置是:课程教程文章
css中align-self属性是什么
2023-12-13 23:05课程教程文章 人已围观
最新web前端入门课HTML5+CSS3详解div+css经典
最新web前端入门课HTML5+CSS3详解div+css经典◆ 从非常基础的HTML讲解,通过实际的案例介绍各种不同类型的标签写法及用法...Vue3开发教程 6. CSS过渡和动画
Vue3开发教程 6. CSS过渡和动画本节课介绍通过transition组件来实现CSS过渡和动画的用法。 6.1 CSS过渡 6.1.1 为t...【Next讲座】用CSS画小猪佩奇
【Next讲座】用CSS画小猪佩奇...Web前端开发(HTML/CSS/javaScript/Vue/React/Node)【
Web前端开发(HTML/CSS/javaScript/Vue/React/Node)【非常开心与大家共同学习WEB前端六星教育VIP试听课 本课程由六星教育联合腾讯...
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异常处理的作用
下一篇:没有了