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

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

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

从右向左进行排列：flex-direction:row-reverse;

从上到下排列：flex-direction:column;

从下到上排列：flex-direction:column-reverse;

---

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

当加入flex-wrap:wrap;时，会折行

同样的，使用flex-wrap:wrap-reverse;进行反向折行

---

可以使用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;

---

<style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 100vh;
            display: flex; /*设置弹性盒子*/
            flex-direction: column;/*按列进行排列*/
            justify-content: space-between;/*设置主轴对齐方式*/
        }
        header{
            height: 60px;
            background: blueviolet;
        }
        main{
            flex-grow: 1;/*将剩余空间撑满*/
            background: #cccccc;
        }
        footer{
            height: 60px;
            background: #383881;
        }
    </style>

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

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