CSS篇 - 彈性佈局flex

目前純文字描述，後期補上圖片說明

概念

• 主軸：main-axis，默認橫向的軸
• 交叉軸：cross-axis，默認縱向的軸，有的稱爲側軸，與主軸90°中心旋轉交叉

彈性佈局的結構

<div class="flex-container"><!-- 容器 -->
    <div class="flex-item">1</div><!-- 項目 -->
    <div class="flex-item">1</div><!-- 項目 -->
</div>

容器css

.flex-container{
    /*主軸方向： row行（橫向） | row-reverse反向行 | column列（縱向） | column-reverse反向列 */
    flex-direction: row;
    /*換行：nowrap不換行 | wrap換行 | wrap-reverse反向換行（往上換行）*/
    flex-wrap: nowrap;
    /*以上二者的簡寫*/
    /*flex-flow: <flex-direction> || <flex-wrap>;*/

    /*
        主軸的對齊方式： 
        flex-start主軸起點對齊（橫向是左對齊，縱向是上對齊）
        flex-end主軸終點對齊
        center主軸中點對齊
        space-between兩端對齊
        space-around兩端對齊，每一個項目兩側的間隔相等並向中間靠攏
      */
    justify-content: flex-start;
    /*
        交叉軸的對齊方式：
        flex-start | flex-end | center
        baseline項目的第一行文字的基線對齊
        stretch拉長，若是項目未設置高度或設爲auto，將佔滿整個容器的高度
    */
    align-items: stretch;
    /*
        多根軸線時交叉軸對齊方式（換行時可產生多根軸線，不換行只有一根軸線此值無效）：
        flex-start | flex-end | center
        space-between兩端對齊
        space-around兩端對齊，每一個軸線兩側的間隔相等向中間靠攏
        stretch拉長，全部軸線佔滿整個容器
    */
    align-content: stretch;
}

項目css

.flex-item{
  /*排列順序：數值越小，排列越靠前，默認爲0*/
  order: 0;
  /*放大比例，與有設置該值的項按比例放大並佔滿空間，默認爲0即若是存在剩餘空間，也不放大*/
  flex-grow: 0;
  /*縮小比例，項目在主軸總寬度超出100%對當前項按比例縮小，默認爲1即若是空間不足，該項目將縮小。*/
  flex-shrink: 1;
  /*
    起始值，分配多餘空間前的初始長度（主軸橫向時是寬度）【width/height可用的長度值，如1px/1em/1rem/auto/30%等】
    瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。
    */
  flex-basis: auto;
  /*以上三者的簡寫*/
  /*flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];*/
  /*
    語法糖解析：
    //none快捷鍵
    flex:none = flex:0 0 auto
    
    //數字(grow,shrink=1,basis=0)
    flex:2 = flex:2 1 0
    
    //數字，數字(grow,shrink,basis=0)
    flex:2 3 = flex:2 3 0
    
    //非數字(grow=1,shrink=1,basis)
    flex:30px = flex:1 1 30px
    flex:30% = flex:1 1 30%
    flex:auto = flex:1 1 auto
    
    //數字，非數字(grow,shrink=1,basis)
    flex:2 30px = flex:2 1 30px
    flex:2 30% = flex:2 1 30%
    flex:2 auto = flex:2 1 auto
    
    //數字，數字，非數字(grow,shrink,basis)
    flex:2 3 30px
    flex:2 3 30%
    flex:2 3 auto
  */

  /*
    自身對齊方式：auto | flex-start | flex-end | center | baseline | stretch
    默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch
  */
  align-self: auto;
}