1.flex布局原理
flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
- 当我们为父盒子设为flex布局以后，子元素的float，clear和vertical-align属性失效
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
概括flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
2.常见父项属性
以下由6个属性是对父元素设置的
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上的子元素的排列方式（多行）
- align-items：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当同时设置了flex-directtion和flex-wrap
2.1主轴与侧轴
在flex 布局中，是分为主轴和侧轴两个方向，同样叫法有：行和列，x轴和y轴
2.2 flex-direction设置主轴的方向
flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
- row 默认值从左到右
- row-reverse 从右到左
- column 从上到下
- column-reverse 从下到上
2.3 fustify-content 设置 主轴 上的子元素排列方法
justify-content 属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是哪个
- flex-star 默认值从头部开始 如果主轴是x轴，则从左到右
- flex-end 从尾部开始排列
- center 在主轴居中对齐（如果主轴是x轴则水平居中）
- space-around 平分剩余空间
- space-between 先两边贴边 再平分剩余空间（重要）
