為盒子模型提供最大的靈活性

• 基本使用

  • 任何容器都可使用 flex 佈局

    .box{
        display: flex;
    }
    

    行內元素也能使用 flex 佈局

    display: inline-flex
    

    webkit 核心瀏覽器，必須加上 -webkit 字首

    display: -webkit-flex;
    

    注

    設定 flex 佈局後，子元素的 float、clear 和 vertical-align 屬性將失效

• 基本概念

  設定了 flex 佈局的元素稱為 flex container(容器)，所有子元素稱為 flex ite(專案)

• 容器屬性

  • flex-direction：決定主軸方向（專案排列順序）

    • row(預設)

    • row-reverse

    • column

    • column-reverse

  • flex - wrap：換行

    預設情況下專案都排在一條線上，如果超出容器，則減少專案寬度，該屬性定義如何換行

    • nowrap：不換行

      超出容器時，縮小 item 的 main-size 或 cross-size

    • wrap：換行，第一行在上方

    • wrap-reverse：換行，第一行在下方

  • flex-flow：是 flex-direction 和 flex-wrap 的簡寫。預設值為 row nowrap

    flex-flow: column wrap
     
    

  • justify-content：定義專案在主軸上的對齊方式

    • flex-start(預設)

    • flex-end

    • center

    • space-around

    • space-between

    • space-evenly

      margin 指的是 item 的 margin

  • align-items

    • flex-start(預設)

    • flex-end

    • center

    • baseline

      專案第一行文字基準線對齊

  • align-content

    定義多根軸線對齊方式，若只有一根軸線，該屬性不起作用

    • flex-start：與交叉軸起點對齊

    • flex-end：與交叉軸終點對齊

    • center

    • stretch(預設值)：佔滿整個容器

    • space-between

      距離關係請參照 justify-content

    • space-around

    • space-evenly

• 專案屬性

  • order

    定義專案排序順序，數值越小，排列越靠前，預設為 0

  • flex-grow

    定義專案放大比例，預設為 0 ，即如果存在剩餘空間也不放大，如果所有專案 flex-grow 的屬性都為 1，則它們等分剩餘空間，如果一個專案為2，其他為1，則佔據空間大1倍

    注：如果沒有剩餘空間，怎麼設定都沒用

  • flex-shrink

    定義了專案的縮小比例，空間不足時將專案縮小。預設為 1，各專案等比例縮小，0不縮小

  • flex-basis

    分配多餘空間之前，專案佔據的主軸空間(main size)預設為 auto (即專案本來大小)，也可設定為固定值，專案佔據固定大小(設定了固定值，將不受 grow 和 shrink 的影響)

  • flex

    flex-grow，flex-shrink，flex-basis 的簡寫

  • align-self

    允許單個專案有與 其他專案不一樣的對齊方式，可覆蓋 align-items 屬性，預設為 auto(繼承父類元素屬性)