弹性布局

1、弹性布局
横向排列：

单行：开启弹性布局：display:flex;  写在父盒子 (子盒子会跟父盒子进行伸缩)
子盒子内写 flex:份数   分父盒子的总大小
子盒子内写 flex-basis:px数   该子盒子固定分走px数(basis优先级比width属性高)

分行：

flex-wrap:wrap;  子盒子固定数值分配，不够就往下面行排
justify-content:flex-start(默认，左边)；flex-end(往右边挤) center(往中间挤) space-round (平均分隔居中) space-between(平均分隔两边)  永远对主轴生效

垂直对齐

align-content:跟justify-content的一样  (这个属性只有多行才会生效)
align-items:flex-start(单行上面对齐)  flex-end(单行下面对齐)  center(单行中间对齐)    在单行使用较多(也支持多行)
align-self:flex-start(单个上面对齐)  flex-end(单个下面对齐)  center(单个中间对齐)

*排列方向：flex-direction:row(按行显示) column(按列显示) 设置哪个，哪个为主轴