Flex布局

一：传统布局与flex弹性布局

传统布局：

兼容性好

布局繁琐

局限性，不能在移动端很好的布局

flex弹性布局：

操作方便，布局极为简单，移动端应用很广泛

PC端浏览器支持情况较差

IE11或更低版本，不支持或仅部分支持

二：布局原理

flex是flexible Box的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效；

伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用Flex布局的元素，称为Flex容器，简称容器，它的所有子元素自动成为容器成员，称为Flex项目，简称“项目”。

三：Flex容器属性

1：display:flex;将盒子设置为flex布局：

2:flex-direction:设置主轴方向

默认主轴方向就是x轴方向，水平向右

属性值	说明
row	默认值从左到右
row-reserve	从右到左
column	从上到下
column-reserve	从下到上

3:justify-content:设置主轴上的子元素排列方式

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

4:flex-wrap:设置子元素是否换行

属性	说明
nowrap	默认值，不换行
wrap	换行

5:align-item:设置侧轴上的子元素的排列方式（单行）

属性	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中
stretch	默认值，拉伸（不能给子项目设置高度）

6:align-content:设置侧轴上的子元素的排列方式（多行）

在单行下是没有效果的

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

7:flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap属性

四：Flex项目属性

1：align-self设置子项目自己在侧轴的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

2：order设置项目的排列顺序

数字越小，排列越靠前，默认为0.

与z-index不一样

3：flex-grow设置项目的放大

4：flex-shrink设置项目的缩小

5：flex属性定义子项目分配剩余空间，用flex表示占多少份