弹性盒模型
2019-09-29 本文已影响0人
Y_B_T
弹性盒模型
-
display:flex
设置弹性盒模型 -
flex-direction
设置主轴方向:
row 从左向右排列(默认值)
row-reverse 从右向左排列
column 从上往下排列
column-reverse 从下往上排列
-
justify-content
主轴对齐:
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧
space-between 富裕空间在元素之间平均分配
space-around 富裕空间在元素两侧平均分配
-
align-items
侧轴对齐:
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧
-
flex-wrap
换行:
nowrap (默认)
wrap 换行
wrap-reverse 反向换行
-
align-content
堆栈伸缩行:
align-content 会更改 flex-wrap 的行为。它和 align-items 相似,但是不是对齐伸缩项目,它对齐的是伸缩行。
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧
space-between 富裕空间在元素之间平均分配
space-around 富裕空间在元素两侧平均分配
-
order
显示顺序(排序)
范例
div:nth-of-type(1){
order: 0;
}
div:nth-of-type(2){
order: -5;
}
//-5 小于 0 最终输出结果是 小的在前面 大的在后面
-
flex
伸缩性
flex: auto
flex: none
//范例:
div:nth-of-type(1){
flex: 1;
}
div:nth-of-type(2){
flex: 3;
}
-
align-self
侧轴对齐
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧