flex布局常见父项属性（display:flex；）

**

flex布局常见父项属性（display:flex;）

**

1.flex-direction:设置主轴方向
row 设置X轴为主轴，从左到右显示
column 设置Y轴为主轴 从上到下显示
row-reverse 设置X轴为主轴 从右到左显示
column-reverse 设置Y轴为主轴 从下到上显示

2.justify-content: 设置主轴上子元素排列方式
flex-start 从左到右或从上到下显示
flex-end 从右到左或从下到上显示
center 水平居中或垂直居中显示
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间

3.flex-wrap: 设置子轴是否换行
nowrap 不换行（默认）
wrap 换行

4.align-items:设置侧轴上子元素排列方式（单行）
flex-start 从左到右或从上到下显示
flex-end 从右到左或从下到上显示
center 水平居中或垂直居中显示
streth 拉伸（拉成和父级相同高度或宽度)

5.align-content: 设置侧轴上子元素排列方式（多行）
flex-start 从左到右或从上到下显示
flex-end 从右到左或从下到上显示
center 水平居中或垂直居中显示
stretch 设置子项元素高度，平分父级元素高度
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间

6.flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap
如：flex-flow: rew wrap X轴为主轴，从左到右显示且换行

补充：
7.flex布局子项常见属性
flex: 子项目占用的份数，使用方法：flex:-1;flex:0;flex:1;等。
order: 定义子选项的排列方式，默认为0，值越小，优先级越高（可以改变盒子排列顺序） -1 0 1 等。
align-self： 控制子项自己在侧轴的排列方式（可以指定移动哪个盒子）