* 全局(父元素上的属性)
* 开启弹性布局
* display:flex
//注意:父元素开启弹性布局,子元素会默认水平排列,主轴方向为水平方向
* 弹性布局的主轴位置方向
* flex-derection:row/column/row-reverse/column-reverse
//注意: 在父元素上开启弹性布局之后,并在父元素设置
//row: 默认值 子元素排列会从左往右边(从左往右)
//column 子元素垂直方向排序(从上往下)
//row-reverse 子元素会倒叙排列(从右往左)
//column-reverse 子元素会垂直倒叙排列(从下往上)
* 子元素在主轴上的对齐方式
* justify-content:flex-start/flex-end/center/space-around/space-between
//注意: 父元素开启弹性布局,默认主轴为x轴,侧轴为y轴,当子元素垂直排列时,主轴为y轴,侧轴为x轴
//flex-start 默认值 弹性盒子的开始位置
//flex-end 弹性盒子的结束位置
//center 居中
//space-around 设置子元素平均分配父元素的剩余的距离,两端的距离是中间的一半
//space-between 在子元素之间分配父元素的剩余空间
* 子元素在侧轴的对齐方式
* align-items:flex-start/flex-end/center
//注意 父元素开启弹性布局,默认主轴为x轴,侧轴为y轴
//flex-start 默认值 弹性盒子的开始位置
//flex-end 弹性盒子的结束位置
//center 居中
* 弹性元素是否换行
* flex-wrap:warp-reverse;
* 弹性元素是否换行
* flex-flow:row warp
* 弹性元素在侧轴的位置分布(整体)
* align-content:flex-end
* 局部(子元素上的属性)
* 弹性元素在侧轴的位置分布
* align-self:flex-end
* 子元素在主轴所占的分量
* flex-grow: 1;
//子元素分配父元素的剩余空间的内容
//使用更多的为flex(flex属性是flex-grow, flex-shrink 和 flex-basis的简写)
* 弹性元素在主轴的排序
* order:1
* 弹性元素的压缩率
* flex-shrink:1
