flex 布局的优势
- flex 布局的子元素不会脱离文档流
- flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范
弹性盒子、子元素
- 弹性盒子：指的是使用
display:flex 或 display:inline-flex 声明的父容器
- 声明：使用
display:flex 或 display:inline-flex 声明的父容器 - flex-direction 属性
- row：从左到右水平排列子元素
- column：从上到下水平垂直子元素
- row-reverse：从右到左水平排列子元素
- column-reverse：从下到上水平垂直子元素
- flex-wrap 属性：控制子元素溢出时换行处理
- justify-content 属性：控制子元素在主轴上的排列方式
- 子元素/弹性元素：指的是父容器里面的子元素们
- justify-content 属性：主轴上的对齐方式
- flex-start：从主轴的起点对齐
- flex-end：从主轴的终点对齐
- center：居中对齐
- space-around：在父盒子里平分
- space-between：两端对齐平分
- align-items 属性：侧轴上的对齐方式
- flex-start：从侧轴开始的方向对齐
- flex-end：从侧轴结束的方向对齐
- baseline：基线 默认同flex-start
- center：中间对齐
- stretch：拉伸
主轴和侧轴
- 主轴：flex容器的主轴，默认是水平方向，从左向右
- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下
