任何乙個容器都可以指定為flex布局；
行內元素也可以使用flex布局；
設為flex布局以後，子元素的float,clear,vertical-align屬性都將失效；
flex容器的屬性：
1flex-direction屬性：flex-direction
2flex-wrap
3flex-flow
4justify-content
5align-items
6align-content
//flex-direction屬性決定主軸的方向；flex-wrap:屬性：預設情況下，item都排列在一條線上，flex-wrap定義，如果一條軸線排不下，該如何換行；.box.box.box.box
1flex-flow:是flex-direction和flex-wrap的縮寫，預設為row nowrap;.box
4.box
7.box
.boxjustify-content:定義item在主軸上的對齊方式；
.box.box.box.box.boxalign-items:item在縱軸上的對齊方式：屬性如下圖：
flex-start：交叉軸的起點對齊。align-content:定義了多跟軸線的對齊方式；如果該專案只有一根軸線，該屬性不起作用；flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
flex-start：與交叉軸的起點對齊。專案item的屬性：flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。
orderflex-grow
flex-shrink
flex-basis
flex
align-self
//order屬性：定義專案的排列順序，數值越小，排列越靠前，預設為0；如果所有專案的
flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。flex-shrink:定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小；
.item如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。負值對該屬性無效。
flex-basis:定義了在分配多餘空間前，專案佔據的主軸空間；預設為auto;即專案本來的大小；
.itemalign-self:屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性，預設值為auto,表示整合父元素的align-items屬性，如果沒有父元素，則等同於stretch;該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
flex布局學習總結 阮一峰
基本概念 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main start，結束位置叫做main end 交叉軸的開始位置叫做cross start，結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主...
Flex布局（引用阮一峰大神）
flex 屬性用於設定或檢索彈性盒模型物件的子元素如何分配空間。flex 屬性是 flex grow flex shrink 和 flex basis 屬性的簡寫屬性。比如 main main div nth of type 1 main div nth of type 2 main div nth...
flex布局知識點
flexbox 布局最合適小規模布局，而網格布局適合較大規模布局。float,clear,vertical align 在flex中不起作用。flex布局中，有兩類作用于父節點也子節點的樣式，大部分簡單的布局只要把父節點寫好了，子節點是沒有多大問題的。display flex 宣告布局方式 flex...