彈性盒子(伸縮盒)

注意，本篇會很長，非常長， 因為彈性盒子的知識點比較多

搜尋 彈性盒子的屬性  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 等等。

　　第五個: 聖盃佈局