flex 布局

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

轴(坐标轴) axis

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

主轴从左向右 flex-direction:row

如何指定item的宽度

flex-basis:50px;

flex-grow:

flex-grow是CSS中的一个属性，它决定了flex容器中的flex项目如何分配剩余空间。当flex容器的主尺寸大于其所有flex项目的主尺寸之和时，flex-grow属性就会发挥作用，指定每个flex项目应该如何增长以填充剩余空间

容器

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

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

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

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

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

flex：1 1 1；

注意：当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%

也就是说flex: 1是flex: 1 1 0%的简写