如果想快捷的使用flex布局，请翻阅到底部。

FlexBox 弹性盒布局主要包括两个部分，一个是container 容器，一个是items 子项。

把普通的盒布局变成弹性盒布局的方法是给父级容器‘display：flex’（或者display：inline-flex），考虑到webkit内核兼容性，写的时候要加-webkit前缀；设置为flex弹性布局以后子元素的float，clear，vertical-align属性将会失效。

然后子项加上属性flex：整数数字（表示比例），或者不加属性flex属性，设置宽或者高（跟主轴方向有关）固定数值，比如100px；则子项不受弹性盒布局的限制；容器除这个子项之外其他有flex的子项按比例分配宽度。

图片来自网络

（1）主轴（main axis）：通过这个伸缩盒子特性，可以很好的管理伸缩项目在伸缩盒子中的布局方向。这个方向可以是从左到右，从上到下，从下到上，从右到左。这个主轴的方向可以通过flex-direction属性来定义值分别为row，row-reverse，column，column-reverse。

（2）主轴起点（main start）和终点（main end）：伸缩项目从主轴起点开始布局到终点结束。属性justify-content就是根据主轴的起点和终点赋予start，center，end等值来布局的。

（3）主轴长度（main size）：伸缩项目在主轴方向上的宽度或者高度就是项目的主轴长度。

（4）侧轴（cross axis）：与主轴垂直的轴是侧轴，所以说，侧轴的方向是由主轴决定的。

（5）侧轴的起点（cross start）和终点（cross end）：伸缩项目充满伸缩行，并且伸缩行从侧轴起点开始布局容器到侧轴终点结束。

（6）侧轴长度（cross size）：伸缩项目在侧轴方向上的宽度或者高度就是项目的侧轴长度。

容器是父级盒子，分为主轴（main axis）和纵轴（cross axis）

1.flex-direction

默认是按照主轴显示。不过也可通过flex-direction属性设置主轴方向。四个值代表的主轴方向：

row: 从左到右

row-reverse: 从右到左

colum: 从上到下

colum-reverse: 从下到上

图片来自网络

2.flex-wrap

flex-wrap设置当内容超出之后是否折行。

nowrap：不换行，而是通过收缩每一个孩子的宽度来挤在一行。

wrap: 换行。

wrap-inverse: 换行，但是折行方向相反，（比如默认是折到下一行，但是这个属性会导致折到上一行）。

效果图如下：

图片来自网络

3.flex-flow

flex-direction 和 flex-wrap 的组合写法。

4.justify-content

不知道如何准确翻译 justify 这个词。它的作用是定义了如何分配剩余的空白区域。

flex-start：主轴方向

flex-end: 主轴反方向

center: 挤在中间

space-between: 中间有空白。

space-around: 中间和两边都有空白。其中两侧的空白是中间的一半宽度，可以理解为每个孩子两侧都有相同宽度的空白，并且空白不合并。

效果图：

图片来自网络

5.align-items

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

.box{align-items:flex-start | flex-end | center | baseline | stretch;}

以上是关于container的属性，接下来看一下items 的属性设置。

图片来自网络

1.align-self

单独在当前孩子上覆盖了 align-items 属性。

2.order

order:<integer>给子项排序。

3.flex-grow

定义了主轴上，孩子分配剩余空白区域的比例。

4.flex-shrink

定义缩小比例，如果孩子的总宽度超过了容器宽度（主轴）,然他们按比例来缩小一定的宽度从而可以在容器中装下。

5.flex-basis

分配空白之前，子项的宽度，默认是 `auto`，也就是孩子本身的宽度。

6.flex

flex属性是flex-grow,flex-shrink和flex-basis的简写，容器的分配比例（推荐使用）

常用：

1）父盒子声明flex布局；（假设没有设置布局方向，默认水平布局）

display:flex;

兼容性写法：

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

设置主轴（水平方向）对齐方式

justify-content：space-between；

设置交叉轴（垂直方向）对齐方式

align-items：center;

2)子盒子

父盒子分配比例：

flex:1；

兼容性写法：

.flex-1{ -webkit-box-flex:1;  -webkit-flex:1;  -ms-flex:1;  flex:1;}

也可以直接设置width固定宽度，剩余盒子按比例分配。