伸缩布局（display:flex）
伸缩布局基本定义：主轴方向，侧轴方向，默认主轴方向为x轴向右，y轴向下为侧轴
1.flex-direction:定义主轴方向
row水平方向 reverse-row翻转 column垂直方向 reverse-column反向
2.justify-content主轴方向的对齐方式
flex-start起始方向对齐 flex-end结束方向对齐 center中间对齐 space-around环绕 space-between两端对齐
3.align-items:侧轴对齐方式
flex-start起始方向对齐 flex-end结束方向对齐 center中间对齐 strethc:拉伸
4.控制子项的比例：注意不指定flex不参与分配
