flex布局常见属性

常见父项属性

1. flex-direction： 设置主轴的方向

flex-direction:row;  从左到右 (默认值)
flex-direction:row-reverse 从右到左排序  
flex-direction: columm  从上到下  
flex-direction:columm-reverse 从下到上

2. justify-content： 设置主轴上的子元素排列方式

justify-content:flex-start  从头部开始 如果主轴是x轴，则从左到右(默认值)
justify-content:flex-end  从尾部对齐 
justify-content:center 在主轴居中对齐(如果主轴是x轴则水平居中) 
justify-content:space-around  平分剩余空间
justify-content:space-between  先两边贴边 在评分剩余空间(重要) 

3. flex-wrap：设置子元素是否换行 默认不换行

flex-wrap:nowrap  不换行 (默认值)
flex-wrap:wrap  换行 

• 换行后会出现已经换行的盒子不会贴着上面盒子显示

4. align-items： 设置侧轴上的子元素排列方式（单行）

• 该属性是控制子项在侧轴(默认是y轴)上的排列方式在子项为单行的时候使用

align-items:flex-start  从上到下 (默认值)
align-items:flex-end  从下到上
align-items:center  挤在一起居中(垂直居中) 如果想要居中对齐 就要添加 justify-content:center;  
align-items:stretch 拉伸(默认值) 继承父盒子高度(注意：子盒子不能给高度)

5. align-content 设置侧轴上的子元素排列方式(多行)

• 设置子项再侧轴上的排列方式并且只能用于子项出现换行得情况(多行)，在单行下是没有效果的。

align-content:flex-start 在侧轴的头部开始排列(默认值)
align-content:flex-end 在侧轴的尾部开始排列
align-content:center 在侧轴中间显示
align-content:space-around 子项在侧轴平分剩余空间
align-content:space-between 子项在侧轴先分布在两头，在平分剩余空间
align-content:stretch 设置子项元素高度平分父元素高度

6.flex-flow 复合属性

- flex-direction 和 flex-wrap 的复合属性

flex-direction:column
flex-wrap:wrap

flex-flow:column wrap 等价于上面两句代码

常见子项属性

1.flex子项占的份数

flex:1;

2.align-self控制子项自己在侧轴的排列方式

3.order属性 定义子项的排列顺序(前后顺序)

• 数值越小排列越靠前，默认为0。
• 注意：和z-index 不一样