Flex Grammar

flex 布局是 CSS3 中提出的一个能够简便、完整、响应式地实现各种页面布局的解决方案，之前在学习 CSS 的时候也有过对flex布局的接触，但是考虑到兼容性问题，并没有广泛使用 flex 布局，来到公司实习，发现公司不用考虑兼容性问题，在线同事们会“建议”客户使用 chrome 或者 firefox。简直美滋滋，赶紧花了一个下午复习了下 flex 布局，然后凭着记忆写了下基本语法以及作用，趁热整理出来，算是以后查询有个地方，配合阮大的教程（1）、阮大的教程（2）食用更佳。

container

display: flex | inline-flex
flex-direction: row | row-reverse | column | column-reverse
flex-warp: nowarp | warp | warp-reverse

warp-reverse --- 换行后第一行在下面，自下往上换行

justify-content: flex-start | flex-end | center | space-between | space-around

space-between --- 两端对齐，即边缘与项目紧贴，然后项目间间隙相等
space-around --- 每个项目两侧间隔相等，所以中间项目间隔是边缘项目与边缘间隔的两倍

align-items: stretch | flex-start | flex-end | center | baseline |

stretch --- 默认值，占满整个容器的高度
baseline --- 项目第一行文字的基线对齐（即文字底部）

align-content: stretch | flex-start | flex-end | center | space-between | space-around

用于多轴线对齐方式，在flex-warp设置为warp项目换行后就会产生多轴线
stretch --- 多条轴线会在交叉轴上平均分布
flex-start --- 轴线全部在交叉轴起点对齐
其他属性以此类推

item

order: [integer]

取值为整数，规定了在容器中的排序顺序，值越小的排序越靠前，初始值为0，可以取负值

flex-basis: auto | [length or height]

定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余的空间。
当主轴为水平轴时，如果设置了这个属性，那么项目的宽度就会失效，主轴为交叉轴时亦然。

flex-basis需要搭配flex-grow和flex-shrink使用

当flex-basis为0%时，则把该项目设置为0尺寸
当取值为auto时，则根据宽高进行设置，则该值不会纳入剩余空间

flex-grow: [number]

该值定义了项目的放大比例，当所有的项目按照flex-basis的值进行排列后如果还有剩余空间，那么设置了该值的项目就会进行相应的大小调整。
初始值为0，即就算存在剩余空间，也不进行放大；如果所有项目的值设为1，则所有项目等分剩余空间；如果某个项目此时值为2，则该项目所占的剩余空间是其他项目的2倍。

flex-shrink: [number]

默认值为1，即如果空间不足，该项目将缩小；如果该值为0，则不缩小。

flex: flex-grow flex-shrink flex-basis

flex的默认值是上述三个值的组合，有两个特殊的取值：auto（1 1 auto） none（0 0 auto）默认取值 1 1 0%（有任何值传入时）

同时有许多默认组合(优先赋值flex-grow)：

当只有一个非负数字时，该值是flex-grow，剩下为1 0%
当只有一个长度（或高度）或百分比时，该值是flex-basis，剩下为 1 1

等等等

同时需要注意在同一时间，flex-shrink 和 flex-grow 只有一个能起作用，这其中的道理细想起来也很浅显：空间足够时，flex-grow 就有发挥的余地，而空间不足时，flex-shrink 就能起作用。当然，flex-wrap 的值为 wrap | wrap-reverse 时，表明可以换行，既然可以换行，一般情况下空间就总是足够的，flex-shrink 当然就不会起作用

align-self允许项目设置自己的对齐方式，默认为auto，为继承父亲的align-items。

该属性所起的作用与align-items相同

flex布局整理

container

item