1 弹性盒子组成
/* 弹性容器 */
display:flex;
/* 主轴 */
justify-content
/* 侧轴*/
align-items
2 主轴对齐方式
/* 默认值 左上角开始 */
justify-content: flex-start;
/* 右上角开始 */
justify-content: flex-end;
/* 水平居中对齐 重要*/
justify-content: center;
/* 间距在子盒子的两侧 */
justify-content: space-around;
/* 两端对齐 空间在子盒子之间 重要*/
justify-content: space-between;
/* 盒子的所有间距都相等 */
justify-content: space-evenly;
3 侧轴对齐方式
/* 顶部对齐 */
align-items: flex-start;
/* 底部对齐 */
align-items: flex-end;
/* 垂直居中对齐 重点*/
align-items: center;
/*默认值 顶部对齐 当子盒子没有高度时 会将子盒子拉伸充满整个容器 */
align-items: stretch;
4 改变主轴方向
/* 改变主轴方向 默认是水平 从左到右排列 */
flex-direction: row;
/* 垂直方向 从上向下 重点*/
flex-direction: column;
/* 水平排列 从右向左 */
flex-direction: row-reverse;
/* 垂直方向 从下向上 */
flex-direction: column-reverse;
