【说站】css中align-self属性是什么
2023-06-13 09:13:23 时间
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 Flex弹性布局详解! (常用的12个属性)
- css属性选择器
- 滚动效果——marquee的html样式和CSS属性
- css opacity属性_CSS中的opacity属性[通俗易懂]
- matlab中Regionprops函数详解——度量图像区域属性
- 【说站】css box-sizing属性是什么
- 【说站】css line-height属性是什么
- 【说站】css中flex-flow属性是什么
- 【说站】css中flex-basis属性是什么
- 设置css属性clear的值为什么时可清除左右两边浮动_clear both
- ndarray 的创建及属性
- css自动换行属性与保留空白属性冲突_css换行样式
- CSS text-decoration 属性
- 【CSS教程】简约渐变色登陆布局html+css代码
- PHP- 复合数据类型-对象的属性(三)
- 2022-04-25:给定两个长度为N的数组,a[]和b[] 也就是对于每个位置i来说,有a[i]和b[i]两个属性 i a[i] b[i] j a[j] b[
- CSS 属性选择器详解编程语言
- CSS常用的属性命名详解编程语言
- jQuery属性选择器详解
- JS为元素添加自定义属性
- 深入浅出 Oracle 修改列属性(oracle修改列属性)
- Linux文件读写属性探索(linux读写属性)
- 用javascript获得css中的属性值的代码
- CSS教程之css选择器、属性、值
- js中巧用cssText属性批量操作样式
- Swift教程之属性详解