在最近的学习中，接触到了flex布局，发现flex很好用，所以今天决定写一写关于flex的一些内容。
在之前的探索中，当一列有很多元素的时候，我通常是通过修改元素的百分比来进行排布。但是当某些时候（例如需要给他们添加等间距时会撑到下一行，或者定位到一定的位置）会很难办。
这时候就要用到
flex
先来看看这个整体属性。它的语法如下
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
来看看各个属性都是什么意思吧
| 属性 | 描述 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他flex的项目进行扩展的量 |
| flex-shrink | 一个数字，规定项目将相对于其他flex的项目进行收缩的量 |
| flex-basis | 项目的长度。合法值："auto"、"inherit"或其中一个之后跟"%"、"px"、"em"或任何其他长度单位的数字。 |
| auto | 与 1 1 auto 相同 |
| none | 与 0 0 auto 相同 |
| initial | 设置该属性为它的默认值（0 1 auto） |
| inherit | 从父元素继承该属性 |
看完这个表之后，我们来细讲一下各个属性。
flex-grow
flex-grow用来规定项目将相对于其他flex的项目进行扩展的量。如果元素不是flex盒对象的元素，则该属性不起作用。
语法：
flex-grow: number|initial|inherit;
| 值 | 描述 |
|---|---|
| number | 一个数字，规定项目将相对于其它flex的项目进行扩展的量，默认值是0 |
| initial | 设置该属性为它的默认值 |
| inherit | 从父元素继承该属性值 |
这个属性可以在flex元素的子元素下设置，设置后的值是相对于同级子元素来说的。利用这个属性，我们可以很方便的排布出各种比例宽度的排版。
flex-shrink
这个属性的值就是相对于grow将数字变为倒数。例如在flex-grow中
flex-grow: 3;
表示的是将该元素设为同级flex元素的3倍
那么
flex-shrink: 3;
则是将该元素设为同级元素的三分之一。
| 值 | 描述 |
|---|---|
| number | 一个数字，规定项目将相对于其它flex项目进行收缩的量，默认值为0 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性值。 |
这个就不多讲了，和flex-grow差不多。
flex-basis
flex-basis属性用于设置或检索flex盒伸缩基准值。
如何理解呢？差不多就是有一堆flex的元素，你只想要调整其中一个的宽度（例如第四个），就可以使用d
div:nth-of-type(4){flex-basis: 100px}
来调整。
| 值 | 描述 |
|---|---|
| number | 一个长度单位或者百分比，规定flex项目的初始长度 |
| auto | 默认值，若该项目未指定长度，则长度将根据内容决定 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性值 |
flex-direction
这个属性用于规定flex项目的方向。
| 值 | 属性 |
|---|---|
| row | 默认值，水平显示，像一行一样 |
| row-reverse | 和row的水平显示一样，但是顺序倒置 |
| column | 垂直显示，如一列一样 |
| column-reverse | 和column的垂直显示一样，顺序倒置 |
| initial | 设置该属性为它的默认值 |
| inherit | 从父元素继承该属性值 |
这个属性可以很便利的将一行显示的元素变为竖向的一列，或者将元素倒置过来。你也可以通过嵌套div实现某部分倒置或者在某处拐弯。
flex-wrap
这个属性让flex元素在必要的时候拆行（碰到浏览器边界或者div边界。）同时横轴的方向决定了新行堆叠的方向。
| 值 | 描述 |
|---|---|
| nowrap | 默认值，不拆行拆列 |
| wrap | 在必要的时候拆行拆列 |
| wrap-reverse | 在必要的时候拆行/拆列，拆行/拆列后顺序倒置（行列顺序，不是元素顺序） |
| initial | 设置该属性为它的默认值 |
| inherit | 从父元素继承该属性 |
flex-flow
这个属性是flex-direction和flex-wrap属性的复合属性。语法如下
flex-flow: flex-direction flex-wrap|initial|inherit;
由于这两个属性的值已经说过，所以就不列表显示了，只要注意使用顺序就好了。
