flex弹性布局
弹性布局设置方式：
弹性布局 开启必须在父元素，对子元素产生效果,设置完之后子元素div 不再是独占一行 并且高度默认与父元素高度一致，宽度是内容的宽度
display: flex;
- 弹性布局的方向 默认的row
- row 项目是从左到右排布的
- row-reverse 项目是从右到左排布
- column 项目从上到下排布 竖直
- column-reverse 项目从下到上排布
- flex-direction:row;
- 垂直弹性布局方向上的对齐方式
- center: 项目居中对齐
- flex-start 对齐竖直开始位置
- flex-end 对齐竖直结束位置
- stretch 默认的样式 在项目不设置高度的时候 高度和父标签等高
- baseline 第一行文字对齐
- flex-warp 换行
- align-items: baseline;
- 弹性布局方向上的对齐方式
- center 居中
- flex-start 项目位于弹性布局方向上开始的位置
- flex-end 项目位于结束的位置
- space-around 间距平分
- space-between 两边贴边 两个项目之间间距相等
- justify-content: center;
