1.flex布局
flex是flexible Box的缩写，意为弹性布局，用来为盒状模型通过最大的灵活性，任何一个容器都可以指定为flex布局
当我们为父容器指定flex布局时，子元素的float、clear、vertical-align属性无效
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
-
采用flex布局的元素成为flex容器，而它的所以子元素自动成为容器成员，称之为flex项目
- 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
2.flex布局父类常用属性
- flex-direction:设置主轴的方向；
- justify-content:设置主轴上的子元素排列的方式；
- flex-wrap:设置子元素是否换行；
- align-content:设置侧轴上的子元素的排列方式(多行)；
- align-items:设置侧轴上的子元素排列方式(单行)；
- flex-flow:复合属性，相当于同时设置了flex-direction与flex-wrap；
-
justify-content的值有：
- flex-start : 默认值 从头部开始 如果主轴是x轴，则从左到右
- flex-end : 从尾部开始排列
- center : 在主轴居中对齐
- space-around : 平分剩余空间
- space-between : 先两边贴边，在平分剩余空间(项目中使用较多)
-
flex-wrap:
- nowrap : 默认值，默认的子元素不会换行，如果装不下，会缩小子元素的大小，让它装下
- wrap: 换行
-
align-items(侧轴单行的排列方式)的值有：
- flex-start : 默认值 从头部开始 如果主轴是x轴，则从上到下
- flex-end : 从尾部开始排列
- center : 在侧轴居中对齐
- stretch: 侧轴方向拉伸
-
align-content(侧轴多行的排列方式)的值有：
- flex-start : 默认值 从侧轴头部开始
- flex-end : 从侧轴尾部开始排列
- center : 在侧轴居中对齐
- space-around : 平分剩余空间
- space-between : 先两边贴边，在平分剩余空间
- stretch : 设置子项元素高度平分父元素高度
-
flex-flow的值有：
- column wrap
3.子项常见属性
- flex属性 : 定义子项分配剩余空间，用flex来表示多少份数
- align-self : 控制子项自己在侧轴上的排列方式
- order: 定义项目的排列顺序，值越小排列越前
