flex 是 flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局，包括行內元素。當設定display: flex時，該容器視為塊級元素，如果設定為display: inline-flex，則該容器視為行內元素。設定為 flex 布局後，子元素的浮動布局相關屬性將會失效，如：float、clear、vertical-align等。
/*視為塊級元素*/
.box
/*視為行內元素*/
.inline-box
複製**
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
容器有六個屬性，接下來慢慢的一一道來。
flex-direction
該屬性決定子元素的排列方向，它有四個屬性值：
flex-wrap
該屬性決定當一條軸線排列不下所有的子元素，應該如何換行，它有三個屬性值：
flex-flow
該屬性是flex-direction和flex-wrap兩個屬性的簡寫形式，預設值即為簡寫的兩個屬性的預設值：row nowrap，因此它的屬性值共有 12 種搭配方式。
justify-content
該屬性定義了專案在主軸上的對齊方式，所以，具體的展現形式，與主軸的方向有關係，它有五個屬性值，此處以主軸為預設值，即flex-direction: row的形式進行說明justify-content的五個屬性值：
align-items
該屬性定義專案在交叉軸上如何對齊，所以，具體展現形式，與交叉軸的方向有關，此處以交叉軸從上到下進行說明該屬性的五個屬性值：
align-content
該屬性定義了多根軸線的對齊方式，如果軸線只有一根軸線，該屬性不起作用，該屬性有六個屬性值：
專案可以設定的屬性共有六個。
order
該屬性定義專案的排列順序，數值越小，則排列越靠前，預設為 0 ，可以設定為負值。
.item
複製**
該屬性定義專案的放大比例，預設為 0 ，即如果存在剩餘空間，也不放大。如果所有專案的flex-grow屬性都為 1，則它們將等分剩餘空間（如果有的話）；如果乙個專案的flex-grow屬性為 2，其他專案都為 1，則前者佔據的剩餘空間將比其他項多一倍。
.item
複製**
該屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小；如果所有專案的flex-shrink屬性都為 1，當空間不足時，都將等比例縮小；如果乙個專案的flex-shrink`性為 0，其他專案都為 1，則空間不足時，前者不縮小；負值對該屬性無效。
.item
複製**
該屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）；瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為 auto，即專案的本來大小；它可以設為跟 width 或 height 屬性一樣的值（比如350px），則專案將佔據固定空間。
.item
複製**
該屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto；後兩個屬性可選；該屬性有兩個快捷值：auto(1 1 auto) 和none(0 0 auto)；建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
.item
複製**
.item
複製**
flex-grow: 1， 效果即為該專案獨自瓜分了所有的剩餘空間，這對於容器內只有兩個專案，其中乙個為固定寬度，另乙個寬度為不確定的情況特別適合。
align-self
該屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性；預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch；該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
.item
複製**
給自己看的flex布局方法
flex是flexiblebox的縮寫，中文名字彈性盒子布局,在小程式布局中支援的很好 在試驗之前可以看一下張鑫旭的flex 1.給父容器設定了display flex 則內部容器的塊狀特性會自動消失 再給內部元素設定display block無效 2.設定flex direction column...
寫給自己看的
我不常寫日誌，不過最近各種事情，還是有點需要記錄下來。今天下午上資料庫的時候，本來以為被鄙視了的 筆試居然發來恭喜通過的通知，說是等待面試，出乎意料的同時也感嘆rp又用掉了很多 最近的rp消耗確實有點失常，painterbee在mm上的表現就不說了，在校賽上也拿到了之前沒拿過的高名次，雖然是題目的區...
寫給自己看的（一）
第一次寫部落格，琢磨了好久不知道該寫些什麼，後來想了想，就當學習筆記了嘛，反正也沒人看 正好今天在看雙越老師的設計模式的時候講到了 模式，於是就順勢查了查es6中proxy的語法，看了看阮一峰老師的書，感覺又開啟了新世界的大門。先說說什麼是proxy吧。proxy英文的意思是 用阮老師的話說，就是p...