記憶體到哪裡去了
flex是什麼？
Flex是flex box的縮寫，意思就是彈性佈局，可以為盒模型提供最大靈活性。
特點：採用flex佈局的元素成為flex容器，它所有的成員都自動成為容器的成員。
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
flexbox佈局功能主要具有以下幾點：
1、螢幕和瀏覽器視窗大小發生變化也可以靈活調整佈局；
2、指定伸縮專案沿著主軸或側軸按比例分配額外空間，從而調增伸縮專案的大小；
3、指定伸縮專案沿著主軸或側軸將伸縮容器額外空間，分配到伸縮專案之前、之後或之間；
4、指定如何將垂直於元素佈局軸的額外空間分佈到該元素的周圍；
5、控制元素在頁面上的佈局方向；
6、按照不同於標準流所指定的排序方式對螢幕上的元素重新排序。
flex容器屬性
1.display：flex、inline-flex注意，設為flex佈局後，子元素的float、clear和vertical-align屬性將失效。
2.flex-direction屬性決定主軸的方向（即專案的排列方向）flex-direction: row從左向右 | row-reverse與row相反 | column從上到下 | column-reverse;與column相反
3.flex-wrap屬性，定義子元素是否換行顯示
flex-wrap: nowrap 不換行 預設值，不管超出還是不超出都不會換行 wrap 換行 一旦伸縮專案超出伸縮容器，那麼就會換行 wrap-reverse; 換行反向 主軸水平時，上下反向，主軸垂直時，左右反向；4.flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap;5.justify-content屬性 定義了專案在主軸（）上的對齊方式。
justify-content: flex-start 伸縮專案向一行的起始位置靠齊；flex-end 伸縮專案向一行的結束位置靠齊；center 伸縮專案向一行的中間位置靠齊；space-between 伸縮專案會平均的分佈在行裡；space-around; 伸縮專案會平均的分佈在行裡，兩端保留一半的空間； space-evenly:把剩餘的空間進行均分6.align-items屬性定義專案在交叉軸上如何對齊。
align-items:flex-start：伸縮專案在側軸起點邊的外邊距 緊靠住 該行在側軸起始邊；flex-end：伸縮專案在側軸終點邊的外邊距 緊靠住 該行在側軸終點邊；center：伸縮專案的外邊距盒 在該行的側軸上居中放置；baseline：伸縮專案根據伸縮專案的基線對齊；（有內容時，按照文字的基線對齊，沒有內容時會按元素的基線對齊）stretch：伸縮專案拉伸填充整個伸縮容器。(預設值)注：stretch是把它的高度進行拉伸，確保沒有高度的情況下，如果有高度會跟高度走，沒有高度會進行拉伸，不定議高度是預設值拉伸
7.align-content屬性定義了多根軸線的對齊方式。對於單行子元素，該屬性不起作用。align-content在側軸上執行樣式的時候，會把預設的間距給合併。對於單行子元素，該屬性不起作用align-content 定義多個伸縮行的對齊方式，往往要與換行同時應用（換行時才用）flex-start：各行向伸縮容器的起點位置堆疊；flex-end：各行向伸縮容器的結束位置堆疊；center：各行向伸縮容器的中間位置堆疊；space-between：各行在伸縮容器中平均分佈；space-around：各行在伸縮容器中平均分佈，兩端保留一半的空間；stretch：各行將伸展以佔用額外空間。（預設值)
flex專案屬性
1、align-self屬性Internet Explorer 和 Safari 瀏覽器不支援 align-self 屬性說明：align-self 屬性規定靈活容器內被選中專案的對齊方式。注意：align-self 屬性可重寫靈活容器的 align-items 屬性。屬性值 auto 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。 Stretch 元素被拉伸以適應容器。 Center 元素位於容器的中心。 flex-start 元素位於容器的開頭。 flex-end 元素位於容器的結尾。
2、order說明：number排序優先順序，數字越大越往後排，預設為0，支援負數。
3、flex說明： 複合屬性。設定或檢索彈性盒模型物件的子元素如何分配空間詳細屬性值： 縮寫「flex: 1」, 則其計算值為「1 1 0%」 縮寫「flex: auto」, 則其計算值為「1 1 auto」 flex: none」, 則其計算值為「0 0 auto」 flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值
4、flex-xxxflex-growflex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。 如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。flex-shrinkflex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。 如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。 負值對該屬性無效。flex-basis=width(height)flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小專案的長度 分配多餘空間之前，專案佔據的主軸空間（Flex元素在主軸方向的初始大小，如果主軸是x軸，相當於width，如果主軸是Y，相當於height）flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。