flex布局属性
设置父容器 display:flex;
父容器用到的属性
- flex-direction布局方向 row column row-reverse column-reverse 默认row
- justify-content 主轴方法内容布局 (row 主轴就是水平方向 column 主轴就是垂直方向)
flex-start
flex-end
center
space-between(连接start-end)
space-around
space-evenly - flex-wrap flex单行还是多行 默认nowrap
nowrap
wrap
wrap-reverse - align-items 交叉轴方向内容布局(单行) (row 交叉轴为上下 column 交叉轴为左右)
flex-start
flex-end
center
stretch - align-content 交叉轴方向内容布局(多行) (row 交叉轴为上下 column 交叉轴为左右) 使用方法同justify-content
flex-start
flex-end
center
space-between(连接start-end)
space-around
子容器用到的属性
- flex-grow 主轴方向填充 expend 大于1和小于1的情况计算方法不同
- flex-basis 主轴方向的size 优先级比单独设置width height高
- flex-shrink 主轴方向收缩比例控制
- flex ==> flex-grow flex-shrink? | |flex-basis 的缩写
设置flex-grow=1,flex-basis=0则会等分全部子元素