Flex布局模型构成
目标：能够使用flex布局模型灵活，快速的开发网页
- 作用
基于flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。 flex布局非常适合结构化布局
- 设置方式
父元素添加 display：flex ， 子元素可以自动的挤压或拉伸
- 组成部分
弹性容器 弹性盒子 主轴 侧轴/交叉轴
主轴对齐方式
目标：使用justify-content调解元素在主轴的对齐方式
- 修改主轴对齐方式属性：justify-content
属性值：flex-slarl
/* 作用： 默认值，起点开始依次排列 */
属性值：flex-end
/*作用： 终点开始依次排列 */
属性值：center
/* 作用：沿主轴居中排列 */
属性值：space-around
/* 作用：弹性盒子沿主轴均匀排列，空白兼具
均分在弹性盒子两侧 */
属性值：space-between
/*作用： 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间 */
属性值：space-evenly
/*作用： 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 */
侧轴对齐方式
目标：使用align-items调节元素在侧轴的对齐方式
- 修改侧轴对齐方式属性：
align-items(添加到弹性容器) align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
属性值： flex-start
/* 作用：默认值，起点开始依次排列 */
属性值： flex-end
/* 作用：终点开始依次排列 */
属性值： center
/* 作用：沿侧轴居中排列 */
属性值： stretch
/* 作用：默认值，弹性盒子沿着主轴线被拉伸至铺满容器 */
主轴方向
目标：使用flex-direction改变元素排列方向
- 主轴默认是水平方向，侧轴默认是垂直方向
- 修改主轴方向属性：flex-direction
属性值：row
/* 作用：行，水平（默认值） */
属性值：column
/* 作用： * 列，垂直 */
属性值：row-reverse
/* 作用： 行，从左向右 */
属性值：column-reverse
/* 作用：列，从下到上 */
