彈性盒子(伸縮盒)
注意，本篇會很長，非常長， 因為彈性盒子的知識點比較多
搜尋 彈性盒子的屬性 ctrl + F 如果覺得圖太小， ctrl + +鍵
主要的屬性有： (主要分兩部分講， 一部分講 設定在父元素上的屬性，一部分講 設定在子元素上的屬性， 還有最後一些簡單的應用)
flex
flex-grow
flex-shrink
flex-basis
flex-direction
flex-wrap
align-content
align-items
align-self
justify-content
order
設定彈性盒子的屬性：
display：flex inline-flex (這兩者的區別就是， 一個是 block 一個是 inline-block)
首先要注意的是：
你給父元素設定了 display：flex 子元素們並不會改變成內聯元素。 雖然他們的效果看起來是， 但是實際上並不會改變。該是啥，還是啥
接下來來看一下，他的效果，及屬性和應用：
首先，display: flex 是設定在 父元素上面的，設定之後， 他裡面的子元素，就會變成 彈性盒子了。(有些人，把父元素叫做盒子，把裡面的子元素叫做 專案)
接下來，幾個屬性， 都是設定在 父元素上面的：↓
flex: direction
設定主軸的方向。 預設的主軸是 橫向 的，從左到右排列，另一條軸叫做 交叉軸， 也就是我們理解的縱向，
引數：
row：預設值，主軸橫向的，從左向右排列
row-reverse：主軸還是橫向的，只是裡面專案的 排列方式不一樣， 是從右向左的。
column：把主軸變成 縱向的，排列方式 也就變成了，從上向下
column-reverse：主軸變成 縱向的，排列方式顛倒， 從下向上排列。
flex-wrap：
設定，子元素溢位，是否換行。
引數：
nowrap：預設值(也就是不換行。子元素如果的寬 大於父元素的，會壓縮子元素) 把所有子元素排列在一行
wrap：子元素溢位，會換行，變成多行的形式
wrap-reverse：顛倒 wrap 的排列方式 (也會變成多行的形式)
justify-content:
設定橫軸(橫向)的對齊方式
引數：
flex-start：預設值 對齊起始位置，第一個子元素的起始位置，然後其他子元素向它看齊
flex-end：跟上面相反的，也就是說，人家對齊在開始，這個對齊在 最後面
center：居中對齊
space-between：如果有多餘的空間，就會平均分佈，每個子元素的 兩邊空白空間保持一致(頭尾的子元素貼邊)
space-around：如果有多餘的空間，就會平均分佈，每個子元素的 兩邊空白空間保持一致(頭尾的子元素不會貼邊)
align-items:
設定(縱軸)縱向的對齊方式：(單行)
引數：
flex-start：預設值 對齊起始位置
flex-end：跟上面相反的，也就是說，人家對齊在起始位置，這個對齊在 最下面
center：居中對齊
baseline: 基線對齊
stretch: 如果沒有設定子元素高度，那麼全部子元素的高度都會被拉伸
既然學了縱向 和 橫向的對齊方式， 那麼現在就用他來設定 一下，我們平常的 居中功能
我們平常設定居中， 是不是要設定 position： 然後就left calc 50% - 去子元素的 寬一半， 然後再去計算 top？ 很麻煩對吧。
看看以下的方法，是不是簡單了許多
align-content:
align-content 跟上面的 align-items 的區別就是，一個是操作單行的，一個是操作多行的。 引數都是一樣的設定， 除了多了兩個 space-betwwen ，space-around
設定縱向的對齊方式(多行)
引數：
flex-start：
flex-end：
center：
space-betwwen
space-around
stretch
接下來的幾個屬性，都是設定在 子元素上的
align-self：
單獨設定對齊方式。如果父元素有設定 align-items的話， 會被子元素給替代掉，也就是，align-self 和 align-items同時設定, 會採用子元素的align-self 對齊方式
但是，如果是 align-self 和 align-content 同時設定， 會採用 父元素的 align-content的 對齊方式
引數：
auto：預設值，也就是遵從 父元素 align-items 的對齊方式。
flex-start：對齊起始位置
flex-end：跟上面相反的，也就是說，人家對齊在起始位置，這個對齊在 最下面
center：居中對齊
baseline: 基線對齊
stretch: 如果沒有設定子元素高度，那麼全部子元素的高度都會被拉伸
order：
設定數值，來決定他們的排列順序
引數：
0：預設值
數值越小，越靠前 支援負數(-1)
flex-grow:
設定數值來 自定義 擴充套件的比例，（不支援負值）
引數：
預設值：0 (也就是，不用擴充套件)
flex-shrink: (flex-shrink的真實計算公式)
設定子元素們的寬加起來大於 父元素寬時，要怎麼壓縮 成一行，
引數：
1：預設值(超出的話，就按照 比例1 壓縮)
學了上面的那個 grow之後， 是不是覺得，他的計算公式那麼簡單， 那麼跟他對應的 shrink 計算公式也一樣？其實不是的，他的計算公式，有點冷門，乃至於w3c 都沒有公式，那麼多他的計算公式怎麼樣呢？ 看下面的例子吧~
還有最後一點，這也是最冷門的知識點。flex-shrink 參與計算的不是盒子的寬， 而是內容區的寬， border 和 padding 都不用加進去計算的。只計算content
flex-basis：(如果使用了flex-direction 改變了主軸的方向，那麼他控制的，就變成了高度。不是寬度，也就是說，橫向控制寬度，縱向控制高度)
如果這個屬性呢， flex-basis: 100px 你這樣設定，他跟 width: 100px的效果是一樣的。
其實把，flex-basis 和 width 兩個一起設定，是有用意的。flex-basis 是決定了 元素寬度的 最小值， width，是決定了元素寬度可撐開的 最大值。
還有最後的一個值：
flex：
他是 flex-grow flex-shrink flex-basis 的縮寫形式
flex：1 1 20%；
代表的是，可以伸縮，該元素的最小寬度是 20%。
我們來利用，今天的全部內容來實現幾個案例。
第一個：居中
第二個：幾等分。
第三個：其中一個固定寬度的佈局
第四個：浮動
有人可能會問， float 不好嗎？ emmm 確實不好， 因為 父級會受浮動流的影響，而且會觸發bfc 等等。
第五個: 聖盃佈局
