彈性佈局（伸縮佈局）

彈性佈局（伸縮佈局）
僅僅是網頁佈局中的一種新的解決方案。
應用場景：當頁面中出現多個盒子一行顯示時，可以考慮使用彈性佈局
如：兩端對齊，中間自適應居中，兩行屬性即可實現：

display: flex;
justify-content: space-between;

問：為什麼彈性盒子中的元素會一行顯示？
1.在彈性盒子中會有兩條軸（預設水平顯示的主軸 + 永遠都垂直於主軸的側軸）
2.在伸縮盒子中，所有子元素都是按照主軸方向排列的
注：
a哪些盒子需要在一行顯示，就給其親爹設定為彈性盒子
b在伸縮盒子中，子元素一行顯示與脫標無關

彈性佈局使用步驟：
1.給父元素設定為彈性盒子，通過屬性display: flex;
2.在父盒子中通過相關屬性調整位置

相關屬性：
排列方向：flex-direction: row | column | row-reverse | column-reverse;
主軸對齊：justify-content: flex-start | flex-end | center | space-between | space-around;
單行沿側軸對齊：align-items: flex-start | flex-end | center | stretch(預設值，拉伸);

補：在彈性盒子中，子元素總寬度無論是否會超過父元素寬度，預設都不會換行。
屬性：flex-wrap: wrap | nowrap(預設不換行);
補：在彈性盒子中，元素換行後，會出現新的對齊方式。（多行沿側周對齊方式）
屬性：align-content: flex-start | flex-end | center | space-between | space-around | stretch(預設);

flex屬性：
作用：給子元素新增，使子元素在父盒子中等分。
例如下程式碼：

.box {
    display: flex;
    width: 100%;
    height: 30px;
}

.box1 {
    flex: 1;
}

.box2 {
    flex: 2;
}

.box3 {
    flex: 3;
}

則：父盒子總共被均分為6份，1號盒子佔一份，2號盒子佔2份，3號盒子佔3份。