Flex弹性布局

flex是w3c提出的，可以简便、完整、响应式地实现各种页面布局，目前，它已经得到了所有浏览器的支持

Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性

任何一个容器都可以指定为flex布局加上属性 display:flex

主要属性如下：

1、flex-direction属性 决定主轴的方向（项目的排列方向）

有四个值：row（主轴为水平方向，起点在左端）

                  row-reverse（主轴在水平方向，起点在右端）

                  column（主轴为垂直方向，起点在上沿）

                  column（主轴为垂直方向，起点在下沿）

2、flex-wrap属性 是否换行

有三个值：nowrap（不换行）

                  wrap（换行）

                  wrap-reverse（反向换行）

3、flex-flow属性是flex-direction属性和flex-wrap属性的简写，默认为row nowrap

4、justify-content属性 定义了项目在主轴上的对齐方式

有五个值：flex-start 左对齐

                  flex-end 右对齐

                  center 居中

                  space-between 两端对齐 项目之前间隔都相等

                  space-around 每个项目两侧的间隔相等，

5、align-items属性 定义项目在交叉轴上如何对齐

有五个值：flex-start 交叉轴的起点对齐

                  flex-end 交叉轴的终点对齐

                  center 交叉轴的中点对齐

                  baseline 项目的第一行文字的基线对齐

                  stretch 如果项目未设置高度或设为auto，将占满整个容器的高度

6、align-content属性 定义了多轴的对齐方式，如果项目只有一根轴线，该属性不起作用

有六个值：flex-start 交叉轴的起点对齐

                  flex-end 交叉轴的终点对齐

                  center 交叉轴的中点对齐

                  space-between 与交叉轴两端对齐 轴线之前间隔都相等

                  space-around 每个项目两侧的间隔相等

                  stretch 轴线占满整个交叉轴