flex布局作为作为一款网页布局神器，简直令人心旷神怡，欲罢不能呀。但是其属性之多，又令人望而却步，单单是这些属性的记忆就能让你喝上一壶。如果在不理解其工作原理的情况下机械的记忆，很快就会忘记，用的时候也不能得心应手，于是便搜寻资料再加上大量的练习，对flex布局及其众多属性有了一个初步的理解与认识，在此做一个简单的记录。
对某个元素声明display:flex后即成为弹性容器，弹性容器有两根轴线，即主轴（默认水平轴线）和交叉轴，容器的子元素为弹性元素。当然，弹性元素也可以通过display:flex成为另一个弹性容器。因此一个元素既可以是弹性容器也可以是弹性元素。
弹性容器的属性及其说明
- flex-direction：主轴的方向，默认值为：row（从左到右）
- flex-wrap：元素宽度超过一行时是否这行折行，默认值为：nowrap（不折行）
- flex-flow：以上两个属性的简写，默认值为：row nowrap
- justify-content：主轴上的对齐方式，默认值为：flex-start（沿主轴起点对齐）
- align-items：交叉轴上的单行对齐，默认值为：stretch（当元素没有设置具体尺寸时会将容器在交叉轴方向撑满）
- align-content：交叉轴上的多行对齐方式，即flex-wrap:wrap且在交叉轴上有多行时有效，此时会把多行作为整体进行对齐。默认值为：stretch
弹性元素的属性及其说明
- flex-grow：放大比例，即当容器宽度大于元素总宽度时的放大比例，默认值为：0（不放大）
- flex-shrink：缩小比例，即当容器宽度小于元素总宽度时的缩小比例：1（等比例缩小）
- flex-basis：主轴上的初始尺寸，默认值为：auto
- flex：以上三个属性的简写，默认值为：0 1 auto
- align-self：单独对某个元素设置交叉轴上的对齐方式，值与align-items相同并且会覆盖容器的align-items属性，默认值为auto
- order：设置元素之间的排列顺序，数值越小排列越靠前，数值相同时以dom元素的原始排序为准，默认值为：0