flex是flexible box的縮寫，意為」彈性布局」，用來為盒狀模型提供最大的靈活性。
任何乙個容器都可以指定為flex布局。
.行內元素也可以使用flex布局。box
.webkit核心的瀏覽器，必須加上-webkit字首。box
.注意，設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。box
採用flex布局的元素，稱為flex容器（flex container），簡稱」容器」。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱」專案」。
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
以下6個屬性設定在容器上。
flex-direction屬性決定主軸的方向（即專案的排列方向）。它可能有4個值。
預設情況下，專案都排在一條線（又稱」軸線」）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。box它可能取三個值。
（1）nowrap（預設）：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
.justify-content屬性定義了專案在主軸上的對齊方式。box
.它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。 align-items屬性定義專案在交叉軸上如何對齊。box
它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。該屬性可能取6個值。
以下6個屬性設定在專案上。 order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
.如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。item
負值對該屬性無效。
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
.它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。item
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
.該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。item
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。item
Flex布局（彈性布局）
flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...
Flex布局 彈性布局
1.flex direction flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row reverse column column reverse 2.flex wrap 預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定...
Flex布局（彈性布局）
傳統布局 flex布局 建議父級常見屬性 flex direction設定主軸的方向主軸與側軸會變化，變化取決於flex direction值的設定，值設定誰為主軸，剩下的就是側軸 屬性值 描述row預設值，從左到右 row reverse從右到左 column從上到下 column reverse...