弹性布局回顾
现代 web 开发要求，网页应该尽量满足不同设备的大小要求，灵活显示网页内容
- display:flex
- 属性
- display-direction 可指定容器的主轴及排列方向
- row 默认值，从左至右
- row-reverse 从右向左排列
- column 从上到下
- column-reverse 从下到上排列
- flex-wrap 是否换行显示
- no-wrap 默认值，不换行，父空间不够也不进行换行，所有子元素项目等比缩小
- warp 换行，当容器放不下时，自动换行，不缩小
- flex-flow 是flex-direction 和 flex-wrap 两个属性的简写
- flex-flow : flex-direction flex-wrap
- justity-content 定义主轴上的对齐方式 （X轴）
- flex-start 左对齐，左到右排列
- flex-end 右对齐，右到左排列
- cneter 居中对齐
- space-between 两端对齐，左右靠边对齐，中间等距排列
- space-around 每一个元素两端间距相等，均等分配
- aligin-items 在交叉轴上的对齐方式（Y轴）
- flex-start 顶对齐
- flex-end 低对齐
- chenter 垂直方向居中对齐
- baseline 以内容文字的基线对齐
- stretch 表示如果项目未设置尺寸，就让项目在交叉轴上占满所有空间，所有子元素项，垂直方向拉伸，默认沾满高度
项目属性：除了可以对父容器设置属性外，还可以对项目设置属性
- order 专门定义项目在主轴上的排序顺序 其值为整数，无需单位，值越小越靠近起点，默认值 0
- flex-grow 专门定义项目放大比例
- 如果容器有足够的空间，项目可以放大
- 其数组为整数，无需单位
- 默认情况项目不放大，默认值0
- 取值越大，占据剩余的空间越多
- 取值一样，则占据的空间始终一样大
- flex-shrink 专门定义项目的缩小比例
- 如果容器空间不足时，项目可以缩小
- 缩小的比例取决于flex-shrink值
- 默认值1，表示空间不足时，则等比缩小，可改为 0 ，表示不缩小
- align-self 专门单独定义某一个项目在交叉轴上的对齐方式
- 与align-items 定义在父容器上约束所有项目的统一对齐方式 align-self 定义在项目上，只约束当前所在的一个项目
- 其取值和align-items完全一样，只是多了一个auto值，表示继承父元素的align-items效果
