Flex布局

弹性布局(flexible box),盒状模型的灵活性。

一、Flex布局特点

（1）任何容器都可以指定flex布局，包括块级元素，行内块元素，行内元素。
（2）webkit内核的浏览器，设置flex布局，需加前缀（display:-webkit-flex）
（3）flex和inline-flex设置使得子元素弹性布局，flex是父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%，inline-flex是父元素会由子元素尺寸动态调整

二、容器的属性（父级元素）

六个容器属性
1.flex-direction  决定主轴方向（项目横向的排列方向）
2.flex-wrap
3.justify-content
4.align-items
5.align-content
6.flex-flow  是flex-direction和flex-wrap属性的简写  不多做介绍

1、flex-direction

flex-direction 决定主轴方向，也是项目的横向排列方向

取值 四 个
 1.row：默认值，主轴设置为水平方向，起点在左边
 2.row-reverse：主轴设置为水平方向，起点在右边
 3.column：主轴设置为垂直方向，起点在上边
 4.column-reverse：主轴设置为垂直方向，起点在下边 

2、flex-wrap

flex-wrap 如果轴线排不下，怎么换行

取值 三 个
 1.nowrap：默认值，不换行，子元素超过父元素，会自动压缩放在父元素里面
 2.wrap：换行，第一行在上面
 3.wrap-reverse：换行，第一行在下面

3、justify-content

justify-content 项目在主轴上的对齐方式（与轴的方向有关，假设主轴是横向的）

取值 五 个
 1.flex-start：左对齐
 2.flex-end：右对齐
 3.center：居中
 4.space-between：两端对齐，项目之间的间隔是相等的
 5.space-around：每个项目的两侧的间距相等，所以项目的之间的间隔比项目与边框的间隔大一倍

4、align-items

align-items 项目在交叉轴上的对齐方式（定义好的主轴的相反方向，假设是从上到下）

取值 五 个
 1.flex-start：交叉抽起点对齐
 2.flex-end：交叉轴的终点对齐
 3.center：居中
 4.baseline：项目的第一行文字的基线对齐  所有的项目会以第一条基线对齐为标准
 5.stretch：默认值，如果项目没有设置高度或设置为auto，将占满整个容器的高度

5、align-content

align-content 多根轴线的对齐方式，如果项目只有一条轴线，该属性不起作用（多行）

取值 六 个
 1.flex-start：交叉抽起点对齐
 2.flex-end：交叉轴的终点对齐
 3.center：居中
 4.space-between：与交叉轴两端对齐，轴线之间间隔相等
 5.space-around：每根轴线两侧间隔相等。相邻间隔会比边框的间距大一倍
 6.stretch：默认值，轴线占满整个交叉轴。

三、项目属性（设置在子元素上）

六个项目属性
1.order  定义项目的排列顺序，数值越小，排列越靠前，默认为0
2.flex-grow 项目的放大比例
3.flex-shrink 项目缩小比例
4.flex-basis 设置单个项目的固定宽度
5.align-self 允许单个项目有与其他项目不一样的对齐方式
6.flex 组合显示(flex-grow flex-shrink flex-basis)  默认 0 1 auto  (auto (1 1 auto) 和 none (0 0 auto))

1、order

order 项目的排列顺序

取值 数字
 0：默认值

单独定义在项目上，项目会先依次找到order 最小的位置，从这个位置开始依次排序。

2、flex-grow

flex-grow 项目的放大比例，按照比例来的

取值 数字
 0：默认值，即使有剩余空间也不放大。

如果项目都设置了flex-grow，就按照各个项目设置的比列进行划分剩余的控件

3、flex-shrink

flex-shrink 项目的缩小比例，按照比例来的

取值 数字
 1：默认值，如果有剩余空间，等比缩小。
 0：不缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4、flex-basis

flex-basis 定义了在分配多余空间之前，项目占据的主轴空间的大小。浏览器根据这个属性，计算主轴是否有多余空间，计算剩下的空间。它的默认值为auto，即项目的本来大小，项目的固定空间。

取值 数字
 auto：默认值，项目的自己的大小。
 像素值：设置项目的固定空间

5、align-self

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

取值 六 个
 1.auto：表示继承父元素的align-items的属性
 2.flex-start：交叉抽起点对齐
 3.flex-end：交叉轴的终点对齐
 4.center：居中
 5.baseline：项目的第一行文字的基线对齐  所有的项目会以第一条基线对齐为标准
 6.stretch：如果没有父元素的属性值，默认值，如果项目没有设置高度或设置为auto，将占满整个容器的高度