flex弹性盒模型，让布局飞起来

定义一个弹性盒子：display:flex;默认水平排列

从左侧进行行排列：flex-direction:row;

---

当元素块的宽度大于盒子的宽度，元素块会自动压缩

---

可以使用flex-flow:进行同时设置
例如：flex-flow:column wrap-reverse等

---

主轴：justify-content

• 主轴的开始：justify-content:flex-start;
• 主轴的结束对齐：justify-content:flex-end;
• 主轴居中：justify-content:center;
• 平均分布：justify-content:space-between;(两边对齐)
• 平均分布：justify-content:space-around;(元素左右两边都有间距)
• 完全平均分布：justify-content:space-evenly;(完全等分)

(要根据排列方向flex-direction决定)

---

交叉轴：align-items

• 交叉轴开始：align-items：flex-start;
• 交叉轴结束：align-items：flex-end;
• 交叉轴居中：align-items:center;
• 拉撑：align-items:stretch;

---

剩余空间平均分配，占一等份：flex-grow:1;
不进行分配：flex-grow:0;

---

• 放大：flex-grow:1;
• 缩小：flex-shrink:2;
• 基准尺寸：flex-basis:100px;

可以写在一起：flex:1 2 100px;