flex布局

一、flex概叙

flex ：弹性布局

1. ** 为父盒子设为flex后，子元素的 float、clear 和 vertical-align失效**

2. display: flex

3. flex的主轴和侧轴不同，主轴X轴，侧轴就为Y轴

二、flex布局常见父项属性

1、设置主轴方向：flex-direction

元素是跟着主轴排列的，这个就可以改变元素的排列方式

主轴设为 X 轴

• flex-direction: row -----------------------从左到右（默认值 ）
• flex-direction: row-reverse ------------从右到左

主轴设为 Y 轴

• flex-direction: column ------------------从上到下
• flex-direction: column-reverse --------从下到上

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

注意：使用前要明确好 主轴 的方向

• justify-content: flex-start ------ 从头开始（默认值 ）
• justify-content: flex-end -------------------- 从尾部开始
• justify-content: center ------ 在主轴居中对齐
• justify-content: space-around ------ 平分剩余空间
• justify-content: space-between ------先两边贴边，在平分剩余空间（重要）

3、设置子元素是否换行：flex-wrap

• flex-wrap: nowrap ------ 不换行（默认值 ）
• flex-wrap: wrap ---------- 允许换行

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

适用于只有一行的元素

• align-items: flex-start ----- 从上到下 （默认值）
• align-items: flex-end ----- 从下到上
• align-items: center ----- 挤在一起居中，垂直居中
• align-items: strech ----- 拉伸：子盒子不加高度

5、设置侧轴上的子元素排列方式（多行）：aligh-content

适用于有出现换行（多行）的元素

• aligh-content：flex-start-----从头部排列（默认值）
• aligh-content：flex-end-----从尾部排列
• aligh-content：center-----在侧轴中间显示
• aligh-content：space-around-----在侧轴平分剩余空间
• aligh-content：space-between-----在侧轴分布在两头，在平分剩余空间
• aligh-content：strech-----子项元素平分父元素高度

6、flex-flow

是 flex-direction 和 flex-wrap 的复合元素

 flex-direction: column;
 flex-wrap: wrap; 

等同于

flex-flow: column wrap;

三、flex布局常见子项属性

1、定义子项分配的剩余空间 : flex: 1（数字）

用flex来表示占多少份数

2、设置自己在侧轴上的对齐方式:align-self

属性和 aligh-items 一样

3、设置排列顺序：order

数字越小越靠前（默认是0）