移动端布局利器--flex

以下内容是我以前在网上学习flex布局个人总结的文字。
flex布局：
2. 首先给父级display为flex即可。
3. flex-direction调整子元素的排列方式，row从左边按正常的从左到右排列，row-reverse从右边按从右到左排列。
4. column将从上往下排列，column从下往上排列。
5. flex-wrap调整子元素的排列控制在一行还是多行。nowrap表示所有子元素排列在一行，宽度会平均分。wrap会将子元素分栏排列
6. wrap-reverse是反过来多行排列。
7. flex-flow该属性是前面会两个方式简写组合，两个参数，第一个是direction。第二个是wrap
8. justify-content在水平方向定义子元素在项目的对齐方式，定义容器剩余空间的分配。flex-start（默认值）默认左对齐，flex-end默认右对齐
9. center左右居中，space-around所有的子元素等分容器空间，包括第一个和最后一个，space-between第一个和最后一个下个容器的边界对齐
10. 剩余空间平分。
11. align-items用来调节垂直方向的的属性，默认为stretch；flex-start定义子元素在垂直方向从起点开始，相反的是flex-end是从结尾开始的，
12. center是垂直居中，baseline所有项目的基线会对其，内容对齐。
13. align-content同justify-content。
14. order指定每个子元素的排列位置，默认值为0，可为负数，排列会从小到大排列。
15. flex-grow指定容器剩余空间分配的时候相对于其他项目当前的项目能够增加多少宽度。没有负数。默认为0，扩大
16. flex-shrink指定项目收缩因素，它确定了当容器还有剩余空间收缩的时候该项目相对于其他项目的收缩多少。
17. 默认情况下，所有的项目都会收缩，但是当我们设置该属性的值为0的时候，项目会保持原有的大小。
18. flex-basis：auto/宽度值该属性的值和width和height取值一样，在flex分配剩余空间之前指定项目用的初始的大小。
19. flex属性是grow shrink 和basis的缩写形式。auto表示（1,1，auto），none表示（0,0，auto）。。