flex
###弹性盒是 CSS3 得一种新的布局方式
-
blcok 块级元素
独占一行, 可以设置宽高
-
inline 行内元素
水平排列, 不可以设置宽高
-
inline-block 行内块
水平排列, 可以设置宽高, 有一个间隙
-
flex 弹性元素
改变其所有 子一级 元素得排列方式
当你设置了 display flex 得时候
弹性父级: 设置 display flex 得元素
弹性子级: 其所有得子一级元素
####开启弹性布局 display: flex
当你开启弹性布局以后你得到了什么
- 得到了一条默认主轴
默认水平方向排列, 按照 X 轴正方向排列
- 得到了一条默认侧轴
永远垂直于主轴排列
##### 开启弹性布局以后, 对子元素得影响
- 所有得子元素默认全部按照主轴方向排列
默认按照从左到右得顺序排列
- 所有子元素默认再主轴方向上没有长度
当主轴为水平得时候, 那么子元素没有宽度
当主轴为垂直得时候, 那么子元素没有高度
- 所有子元素默认再侧轴上填满长度
当主轴为水平得时候, 那么子元素高度就是侧轴得长度
当主轴为垂直得时候, 那么子元素高度也是侧轴得长度
- 所有子元素再主轴默认得排列方式是
从主轴开始方向向主轴结束方向排列
- 所有子元素默认再侧轴开始方向堆叠
默认都是放在侧轴开始位置
- 所有子元素永不换行
当一行排列不下得时候, 会自动均匀挤压所有子元素
直到子元素不能再继续被挤压(里面由内容), 那么就直接溢出盒子
弹性盒子父级属性
-
flex - direction :表示主轴方向
- 默认值
- row 水平排列 从左到右
- 可选值
- row - reverse 水平排列 从右向左
- column 垂直排列 从上到下
- column - reverse 垂直排列 从下到上
- 默认值
-
justify - content 表示主轴方向元素排列方式，不改变元素的顺序
-
默认值：
- flex -start //元素堆叠再主轴开始位置
-
可选值
-
flex - end //元素堆叠再主轴结束位置
-
center //元素居中排列
-
space - between //所有空白填充再两者之间，左右两个贴紧盒子
-
space - around //所有空白环绕每一个元素两边
左右两边紧贴盒子的元素距离盒子的距离是两个元素之间距离的 一半
-
space - evently //表示均分所有空白位置
每一个元素之间的间距都是相等的，包括左右两边的元素；
安卓 不支持，只有IOS支持
-
-
-
aline - items //表示元素在侧轴的排列方式
-
默认值 flex - start //排列在侧轴开始位置
-
可选值 flex - end //排列在侧轴结束位置
center //排列在侧轴的中心位置
-
-
flex - wrap //表示是否换行
-
默认值 no - wrap //表示不允许换行
-
可选值 wrap //可以换行
换行规则：1.计算你能分多少行
2.就把侧轴均分为多少份
3.元素在侧轴超出就会就职溢出
-
-
aline - content //表示侧轴的排列方式（多行）
-
前提 ：需要有多好元素
-
规则：每一行就是一个整体
-
默认值：无
-
可选值：flex - start //堆叠在侧轴的左侧
flex - end //堆叠在侧轴的结束
center //堆叠在侧轴的中间
space - between //所有侧轴上得空白均分在每两个单位之间*
space - around //所有侧轴上得空白均匀环绕在每一个单位得两边*
space - evenly //所有侧轴上得单位均匀分布在中间位置*
-
6.当一个元素内部没有子元素, 只有文本得时候
会把所有文本内容当作一个子元素看待
弹性子级的属性
1.aline - self //表示自己在侧轴的排列方式
默认值：跟随父级的排列方式
可选： flex - start //表示自己排列在侧轴的开始位置
flex-end //表示自己排列在侧轴的结束位置
center //表示自己排列在侧轴的中间位置
2.flex //表示自己占总体的多少份
flex : 数字 //表示自己占固定宽度之外的总的宽度的几分之几
//当你设置了弹性宽度以后
会有内容挤压得行为存在
内容挤压得时候, 优先挤压 弹性 宽度得元素
直到弹性元素得宽度不能再被挤压得时候, 挤压定宽元素*
直到所有元素都不能再挤压得时候, 会溢出
3.order //表示自己的排序位置
order : 数字 //数字越大越往后排列
1298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
