移动端flex布局

一、常见父级属性

1.flex-direction主轴方向

属性值	描述
row	从左到右（默认值）
row-reverse	从右到左
column	从上到下
column-reverise	从下到上

2.justify-content主轴子元素的排列方式

属性值	描述
flex-start	从头部开始（默认值）
flex-end	从尾部开始
center	在主轴居中对齐（如果主轴是X轴，则是水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

3.align-items侧轴子元素的排列方式（单行）

属性值	描述
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中
stretch	拉伸（默认值）

4.align-content侧轴子元素的排列方式（多行）

属性值	描述
flex-start	从侧轴头部开始（默认值）
flex-end	从侧轴尾部开始
center	在侧轴居中对齐
space-around	平分侧轴剩余空间
space-between	先两边贴边，再平分侧轴剩余空间
stretch	设置子项元素高度平分父元素高度

5.flex-wrap子元素是否换行

属性值	描述
nowarp	不换行（默认）
warp	换行

6.flex-flow复合属性

是flex-direction和flex-wrap两个属性的合写

例如：

flex-flow: row wrap;

二、常见子项属性

1.flex属性

定义子项分配剩余空间，用flex来表示占多数份数

2.align-self控制子项自己在侧轴上的移动

可覆盖align-items属性

3.order定义项目的排列顺序

默认为0，越小越靠前