主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向即x轴和y轴。
默认主轴是x轴 行 row，侧轴是y轴 列 column ；我们的元素是根据主轴来排列的。
flex父级常见属性
1. flex-direction：设置主轴方向
flex-direction:row;
//设置x轴为主轴（从左到右）
flex-direction:row-reverse;
//翻转（从右到左），简单了解
flex-direction:column;
//设置y轴为主轴
flex-direction:column-reverse;
//从下到上
2. justify-content：设置主轴上的子元素排列方式
justify-content:flex-start;
//默认值从头部开始 如果主轴是x轴，则从左到右
justify-content:flex-end;
//从尾部开始排列
justify-content:center;
//在主轴居中对齐
justify-content:space-around;
//平分剩余空间
justify-content:space-between;
//先两边贴边 再平分剩余空间 （这个重要）
3. flex-wrap：设置子元素是否换行
flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面
flex-wrap:nowrap;
//默认值，不换行
flex-wrap:wrap;
//换行
4. align-content：设置侧轴上的子元素排列方式（多行）
align-content:flex-start;
//默认值在侧轴的头部开始排列
align-content:flex-end;
//在侧轴的尾部开始排列
align-content:center;
//在侧轴中间显示
align-content:space-around;
//子项在侧轴平分剩余空间
align-content:space-between;
//子项在侧轴先分布在两头，再平分剩余空间
align-content:stretch;
//设置子项元素高度平分父元素高度
5. align-items：设置侧轴上的子元素排列方式（单行）
align-items:flex-start
//默认值，从上到下
align-items:flex-end;
//从下到上
align-items:center;
//挤在一起居中（垂直居中）
align-items:stretch;
//拉伸
6. flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex-flow:row wrap;
