1、技術點：display:flex將塊狀元素能在一排顯示；flex需要新增到父元素上；子元素預設從左到右進行排序。
2、justify-content：設定橫軸的排列方式。
justify-content: flex-start | flex-end | center | space-between | space-around;(1)flex-start:交叉軸的起點對齊。
(2)flex-end:右對齊
(3)center:居中對齊
(4)space-between:兩端對齊，專案之間的間隔相等。
(5)space-around：每個專案的兩側間隔相等，專案之間的間隔比專案與邊寬的間隔大一倍。
3.align-items:設定豎軸的排列方式
align-items: flex-start | flex-end | center | baseline | stretch;(1)flex-start:預設值，左對齊
(2)flex-end:交叉軸的終點對齊
(3)center：垂直居中
(4)baseline：專案的第一行文字的基線對齊
.box我給三個盒子設定了不同的字型大小，效果會更加明顯。
(5)stretch：預設值。如果專案未設定高度或設為auto，將佔滿容器的整個高度。
.box
/*不設定高度，元素在垂直方向上鋪滿父容器*/
.box div
彈性盒子模型屬性之flex shrink
上一次,我們已經了解過flex grow的具體用法後,這周,讓我們一起來見一下flex basis這個屬性.flex shrink 定義專案的縮小比例，預設值為1，注意前提是空間不足的情況下，專案縮小。值為0,不縮小。下面的例子中沒有定義該屬性，但是滿足容器中空間不足的情況,專案會預設縮小。當專案1...
彈性盒子模型屬性之flex grow
在學習彈性盒子模型的時候,有幾個屬性常常讓同學們感覺頭痛,不知到最後得到的效果數值到底是怎樣計算得來的,那麼不要慌,穩住,我們能贏 今天就讓我們先來看看flex grow這個屬性 flex grow 定義專案的放大比例，預設值為0，就算存在剩餘空間，也不會放大。下面的例子中沒有定義該屬性，是不會擁有...
彈性盒子模型屬性之flex shrink
上一次,我們已經了解過flex grow的具體用法後,這周,讓我們一起來見一下flex basis這個屬性.flex shrink 定義專案的縮小比例，預設值為1，注意前提是空間不足的情況下，專案縮小。值為0,不縮小。下面的例子中沒有定義該屬性，但是滿足容器中空間不足的情況,專案會預設縮小。當專案1...