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;

弹性布局自动换行

flex-wrap: wrap;