一.flex：可以简便、完整、响应式地实现各种页面布局
采用Flex布局的元素，称为flex容器container
元素的所有子元素自动成为容器成员，称为flex项目item
PS：容器中默认存在两条轴，主轴和交叉轴，每根轴都有起点和终点,呈90度关系。项目默认沿主轴排列
二.flex常用的属性，我们可以划分为容器属性和容器成员属性：
*容器属性有：
flex-direction：决定主轴的方向(即项目的排列方向，默认值为row)
flex-wrap：决定容器内项目是否可换行（默认情况是不换行：nowrap）
flex-flow：是flex-direction属性和flex-wrap属性的简写形式(默认值为row nowrap)
justify-content: 定义了项目在主轴上的对齐方式（默认值左对齐：flex-start）
align-items: 定义项目在交叉轴上如何对齐（默认值为stretch）
align-content: 定义了多根轴线的对齐方式（默认值为stretch）
*容器成员属性如下：
Order：定义项目的排列顺序（数值越小，排列越靠前，默认为0）
flex-grow: 定义项目的放大比例（容器宽度>元素总宽度时如何伸展，默认为0，即如果存在剩余空间，也不放大；无多余宽度，此时无论flex-grow是什么值都不会生效）
flex-shrink：定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩，默认为1，即如果空间不足，该项目将缩小；在容器宽度有剩余时，flex-shrink也是不会生效的）
flex-basis：设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸，浏览器根据这个属性，计算主轴是否有多余空间（默认值为auto，即项目的本来大小）
flex: 是flex-grow, flex-shrink 和 flex-basis的简写（默认值为0 1 auto）
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性（默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch）
