flex 布局

flex的核心概念是 容器 和 轴，容器包括外层的 父容器 和内层的 子容器，轴包括 主轴 和 辅轴

轴

在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ：行和列、x 轴和y 轴。这个主轴会根据flex-direction的设置进行变化。
--flex-direction 值 --含义
row 默认值，表示主轴从左到右
row-reverse 表示主轴从右到左
column 表示主轴从上到下
column-reverse 表示主轴从下到上

容器

容器的属性可以作用于父容器（container）或者子容器（item）上

①父容器（container）-->属性添加在父容器上

flex-direction 设置主轴的方向
justify-content 设置主轴上的子元素排列方式
flex-wrap 设置是否换行
align-items 设置侧轴上的子元素排列方式（单行 ）
align-content 设置侧轴上的子元素的排列方式（多行）

②子容器（item）-->属性添加在子容器上

flex 属性 定义子项目分配剩余空间，用flex来表示占多少份数
align-self控制子项自己在侧轴上的排列方式
order 属性定义项目的排列顺序