最近想学习一下移动端开发，学习了一下flex，这个东西简直厉害的不行呀，主要是参考阮一峰的文章
容器的属性
- flex-direction：flex的方向(row | row-reverse | column | column-reverse) ,这个对于很多布局是很有用的
- flex-wrap：换行（nowrap | wrap | wrap-reverse），默认不换行
- flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
- justify-content：属性定义了项目在主轴上的对齐方式（flex-start | flex-end | center | space-between | space-around）
- align-items：定义项目在交叉轴上如何对齐，即纵轴上的对齐方式
- align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
项目的属性
- order：定义项目的排列顺序。数值越小，排列越靠前，默认为0（可以为负数）
- flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
- flex：
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]， - align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
flex实例
- 骰子的布局
- 网格布局
- 圣杯布局
- 输入框的布局
- 悬挂式布局
上面几个布局我已经自己动手写过，之后传到github吧