弹性盒模型，flex

1、定义盒模型的主轴方向，flex-direction

flex-direction: row;    // 设置主轴方向为水平方向

flex-direction: column;    // 设置主轴方向为垂直方向

 

2、主轴上的元素排列方向

flex-direction: row-reverse;     // 设置主轴方向为水平，元素排列为反序

flex-direction: column-reverse;     // 设置主轴方向为垂直，元素排列为反序

 

3、主轴方向富裕空间的管理， justify-content

justify-content：flex-start;     // 元素在主轴开始位置，富裕空间在主轴的结束位置

justify-content：flex-end;     // 元素在主轴结束位置，富裕空间在主轴的开始位置

justify-content：center;     // 元素在主轴中间，富裕空间在主轴的两侧

justify-content：space-between;     // 富裕空间平均分配在每两个元素之间

justify-content：space-around;     // 富裕空间平均分配在每个元素的两侧

 

4、侧轴方向富裕空间的管理，align-items

align-items: flex-start;     // 元素在侧轴开始位置，富裕空间在侧轴结束位置

align-items: flex-end;     // 元素在侧轴结束位置，富裕空间在侧轴开始位置

align-items: center;     // 元素在侧轴中间，富裕空间在侧轴两侧

align-items: baseline;     // 根据侧轴方向上文字的基线对其

 

5、元素弹性空间，在子集设置

flex-grow: 1;

 

6、元素的具体位置设置

order: 1;    // 数值越小越靠前，可以接受0或负值

 

转载于:https://www.cnblogs.com/haishen/p/10984953.html