【CSS】Flex弹性布局

Flex是 Flexible Box 的缩写，弹性布局

容器的属性

flex-direction：横轴方向（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：纵轴对齐方式（flex-start，flex-end，center，baseline，stretch）
align-content：多轴对齐方式，只有一个轴不生效（flex-start，flex-end，center，space-between，space-around，stretch）

justify-content、align-items分别为横轴，纵轴的对齐方式，但如果修改了flex-direction为column，它们对齐方式会交换，也就是justify-content处理纵轴，align-items处理横轴。

容器内元素属性

order：定义元素的顺序，默认为0
flex-grow：元素放大，默认为0，不放大
flex-shrink：元素缩小，默认为1，空间不足将缩小，如果为0，将不缩小，固定大小
flex-basis：设置元素宽度，默认auto，元素内容大小（number|auto|initial|inherit）权重高于width，会覆盖width
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self：单独设置每个元素的对齐方式，将覆盖align-items属性，默认值为auto，继承父元素的align-items属性，如果没有父元素，则为stretch（auto，flex-start，flex-end，center，baseline，stretch）