flex布局自从学了flex，其他布局的方法基本就忘光了，所以flex布局还是很重要的，一直看的都是阮一峰的flex布局

自从学了flex，其他布局的方法基本就忘光了，所以flex布局还是很重要的，一直看的都是阮一峰的flex布局，但最近发现还是有很多不清晰的，所以记下来看看~

容器属性

flex-direction（确定主轴）： row | row-reverse | column | column-reverse
默认值：row，主轴为水平方向，起点在左端。
flex-wrap (主轴是否换行)）： flex-wrap: nowrap | wrap | wrap-reverse
默认值：nowrap 不换行，当空间不足时会调整项目尺寸
flex-flow （flex-direction和flex-wrap简写）
justify-content （主轴对齐方式）：flex-start | flex-end | center | space-between | space-around
align-items（交叉轴对齐方式）：flex-start | flex-end | center | baseline | stretch
align-content（多根轴线的对齐方式）：flex-start | flex-end | center | space-between | space-around | stretch

什么时候会出现多轴？-- flex-warp换行的时候。 align-content就是多根主轴线相对于交叉轴的对齐方式。

排列顺序 : 默认值为 0

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

默认值为 0，即如果存在剩余空间，也不放大

默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效。

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

先按照<flex-basis>分配项目大小，如果有剩余空间或空间不足，则按照flex-grow和flex-shrink进行缩放。

flex属性有三种写法：

单值语法：如果是一个无单位数，会被当作 flex:<number> 1 0;如果是一个有效的宽度值,会被当作 <flex-basis> 的值。
双值语法:第一个值必须为一个无单位数，并且它会被当作 <flex-grow>的值。第二个值如果是一个无单位数，会被当作 flex-shrink，如果是一个有效的宽度值,会被当作 <flex-basis> 的值。
三值语法：第一个值必须为一个无单位数，并且它会被当作 <flex-grow>的值。第二个值必须为一个无单位数，并且它会被当作 <flex-shrink>的值。第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis>的值。

flex有三个关键字：