css中align-self属性是什么
2023-09-11 14:18:27 时间
css中align-self属性是什么
1、align-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
2、align-self多了个auto(默认值),表示继承自flex容器的align-items属性值。
实例
CSS
.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中flex-basis属性是什么?
1、flex-basis定义了元素在分配剩余空间之前的默认大小。
2、默认值是auto,即自动。如果有设置width,占用空间就是width。如果没有设置,按照内容宽度。若同时设置width和flex-basis,则在渲染性能方面,将忽略width。
当剩余空间不足时,flex子项的实际宽度通常不是flex-basis的设定尺寸,因为当flex布局剩余空间不足时,默认会收缩。
实例
CSS
.c {
flex-basis:50px;
}
.c1 {
flex-grow:1;
background-color:#409EFF;
}
.c2 {
flex-grow:2;
background-color:#EEEEEE;
}
.c3 {
flex-grow:1;
background-color:#FAEBD7;
}
以上就是css中flex-basis属性的介绍,希望对大家有所帮助。
本文教程操作环境:windows7系统、css3版,DELL G3电脑。
相关文章
- 小程序/CSS的font-weight属性
- 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
- 【Cssflex】css中关于弹性布局flex的综合用法(示例展示)
- 【CSS】 Css背景图片及背景渐变综合知识和技巧大全(代码实例)
- 每日一学—CSS flex-grow 属性
- div居中和内容居中的css属性设置
- 判断js对象是否拥有某属性
- [UWP 自定义控件]了解模板化控件(6):使用附加属性
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
- js - object的属性操作
- 《Lua游戏AI开发指南》一2.10 智能体的属性
- webpack4+(打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩)
- CSS常用属性以及使用场景
- jqGrid配置属性说明
- CSS_css sprite原理优缺点及使用
- java获取对象属性类型、属性名称、属性值
- CSS属性:定位属性(图文详解)
- CSS学习知识整理(三)Css 文本
- CSS学习知识整理(二)Css 背景
- MongoDB的学习--索引类型和属性(转)
- Runtime(动态添加属性)
- 简约之美jodd--props属性使用
- CSS 加粗(css font-weight)
- C# - var 匿名对象属性的赋值与取值
- 学习旧岛小程序 (5) observer 函数中修改属性的值