Css3之Flex佈局

Flex(flexible box) 彈性佈局

傳統的佈局解決方案，基於盒模型，經過 css中的display屬性 + position屬性 + float屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。

• 概念

  • 任何容器均可以設爲flex佈局
  • 採用flex佈局的元素即爲flex container，其子元素爲容器成員(flex item)
  • 設爲flex佈局之後，子元素的float/clear/vertical-align屬性將會失效

• 主軸和交叉軸

  • 容器默認存在水平主軸main axis和垂直的交叉軸cross axis
  • flex-item排列的方向是主軸

• flex-container容器屬性

• • flex-direction決定主軸的方向(同時也是flex-item的排列方向)

    flex-direction: row | row-reverse | column | column-reverse;

    • row（默認值）：主軸是水平方向，flex-item水平從左往右排列
    • column : 主軸呈垂直方向,從上邊沿向下排列
    • reverse參數: 將起始與終點進行互換

  • flex-wrap 屬性定義若是在一條軸線上排不下，換行的規則

    flex-wrap：nowrap | wrap | wrap-reverse

• nowrap（默認值）：不換行

  - `wrap` : 天然換行 直接將多餘的元素從下一行開始排列  
   - `wrap-reverse`: 將第一行排列到下方

  • flex-flow 是flex-direction和flex-wrap的簡寫，默認值爲row nowrap

  • justify-content:定義flex-item在主軸main-axis上的對齊方式

    justify-content: flex-start | flex-end | center | space-between | space-around

    • flex-start（默認值）：左對齊；
    • flex-end右對齊；
    • center居中；
    • space-between：兩端對其，flex-item間的間隔距離相等
    • space-around：每一個flex-item兩側的間隔相等，至關於設置左右margin值相等

  • align-items : 定義flex-item在交叉軸的對齊方式

    align-items: flex-start | flex-end | center | baseline | strecth。五個取值與交叉軸方向有關

    • flex-start|flex-end|center和flex-direction同樣，只不過是在交叉軸起點、終點、中點對齊；
    • baseline：flex-item的第一行文字的基線對齊
    • stretch（默認值）：若是flex-item沒有設置高度或者值爲auto，將佔滿整個容器高度

  • align-content：若是容器內出現多跟軸線（即出現wrap），定義主軸在交叉軸上的對齊方式，只有一根軸線時不起做用

    align-content: flex-start | flex-end | center | space-between | space-around | stretch

    • stretch（默認值）：軸線沾滿整個交叉軸
    • space-between：與交叉軸兩端對齊，軸線間的間隔平均分佈
    • space-around：每根軸線兩側的間隔相等
    • flex-start：與交叉軸起點對其

• flex-item項目的屬性

• • order 屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

  • flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大.

         若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

  • flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。負值對該屬性無效。

  • flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選

    > flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

• flex-basis

• align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

  > align-self: auto | flex-start | flex-end | center | baseline | stretch;