一、控制盒子（外面的叫盒子，里面的叫项目）
1.display: flex;（inline- flex）设置弹性盒子（行内）。
2.弹性盒子的轴的方向为一个重要的内容
flex - direction : row; 默认值是row 表示 主轴的方向是 →
flex - direction : row-reverse; 和row的方向相反
flex - direction : column; 项目呈列显示，主轴方向为↓。
flex - direction : column-reverse; 项目呈列显示，方向为与column相反。
3.当项目在必要的时候进行拆分
flex-wrap: nowrap；nowrap是默认值。规定不会拆行或者列。
flex-wrap: wrap； 规定在必要的时候就拆行列。
flex-wrap: reverse; 规定灵活的项目在必要的时候就要反向拆行和列。
4. 基于主轴的对其方式
justify-content：flex-start； 项目从容器的开始显示
justify-content：flex-end ； 项目从容器的结束处开始显示
justify-content：center ； 项目居于盒子的中间
justify-content：space-between； 项目两头对对齐，项目之间平均之间的距离，保持中间位置留白且距离相等。
justify-content：space-around ； 各个项目两头平铺开来，各个项目之间留白，而且和容器之间也留有空白。
5. 基于交叉轴的对齐方式。
align- item : center 项目居于盒子的中间
align- item : flex-start; 项目从容器的开始显示
align- item : flex-end; 项目在结束容器结束处
align- item : stretch; 默认值，项目会被拉伸适应容器。（在项目没有设置高度的情况下）
align - item： baseline； 基于文本基线对齐。
二、项目里的属性
1. order： 0； 默认值是0，order值越小显示越靠前。和z-index差不多，属性值的用法与其相反。
2.align - self ：auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
align - self ：stretch 元素拉伸适应容器
align - self ：包含属性值有 baseline，center，flex-start， flex-end 用法效果和上面的一样。
三、flex-shrink 当项目总宽度比父元素小的时候 才会生效。
意为分配超出部分的空间， 后面跟数字为分配超出部分的比例，缩减应该比例的宽度。 与 flex- grow 相反
flex - grow 是分配不够的空白部分，用法和flex- shrink一样。
flex - basis 是规定了项目的最小宽度 ，width设定的是最大宽度。