flex布局

一. flex 布局

也叫弹性布局，就是给父盒子添加 flex 属性，以来控制子盒子的位置和排列方式。特点:

• 布局比较简单，移动端使用比较广泛，对PC端浏览器支持不好。
• 当父盒子设置为 flex 布局之后，子元素的 float、clear、vertical-align 属性将会失效。
• 采用 flex 布局灵活性比较好。

二. 常见属性（父盒子）

1. flex-direction 主轴方向

flex布局中，主轴默认为X轴水平向右，侧轴默认为Y轴，垂直向下。主轴方向设置有4个属性：

• row ：主轴方向向右，默认值。
• row-reverse ： 主轴方向向左。
• column ： 主轴方向向下。
• column-reverse ： 主轴方向向上。

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 : 据中显式。
• stretch : 拉伸。

5. align-content

设置子元素在侧轴上的排列方式，适用于子项出现换行(多行)的情况，单行下无效。属性有：

• flex-start : 默认值，从侧轴的头部开始排列。
• flex-end : 从侧轴的尾部开始排列。
• center : 在侧轴中间显式。
• space-around : 子项在侧轴平分剩下的空间。
• space-between : 元素两边的元素先贴边，然后再平分剩余空间。

三. 常见属性 （子元素）

1. flex

定义子元素项目分配剩余空间占比，属性值为数字。

2. align-self

允许单个元素有与其他元素不一样的对齐方式，可以覆盖 align-items 属性，默认值为 auto ，表示继承父元素的 align-items 属性，父元素没有此属性，则等同于 stretch。

3. order

定义子元素排列顺序，属性值为数字，数字越小，排列越靠前，默认为 0。