iT邦幫忙

0

淺談CSS Flexbox

WM 2019-03-03 18:29:193987 瀏覽

一個容器 & 兩條線

https://ithelp.ithome.com.tw/upload/images/20190301/20112573rzbEzMrCe8.png
圖片來源:https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

先看過最重要的7個部分,再介紹它們的用法。

  • 容器(flex container):所有要排列的項目都必須放入此容器中。
  • 主軸 (main axis):決定元素是「水平」或「垂直」排列。
  • 交錯軸 (cross axis):與主軸 (main axis)垂直,決定元素的「對齊位置」。
  • 主軸起點 (main start):預設排列起始點,最左邊。
  • 主軸終點 (main end)
  • 交錯軸起點 (cross start):預設貼齊位置點,最上方。
  • 交錯軸終點 (cross end)

flex container(容器)的屬性

  • display
    顧名思義,容器裝的就是我們要排列的元素,要讓元素能夠使用Flexbox方式排版,首先要做的就是先在容器 .flexdisplay屬性設定flex,Flexbox才會作用。

      <div class="flex">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
      </div>
    
    .flex {  
        display: flex;    
    }
    
  • flex-direction
    決定元素「水平」或「垂直」排列。
    主要設定「主軸」的方向,若主軸為「水平」,則交錯軸為「垂直」,反之亦然

    .flex {   
        display: flex;
        flex-direction: row | row-reverse | column | column-reverse ;
    }
    

    https://ithelp.ithome.com.tw/upload/images/20190302/20112573H80yJbNwuw.png
    總共有4種:

    • row:預設值,由左至右。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573alDwA2JU5S.png
    • row-reverse:由右至左。
      https://ithelp.ithome.com.tw/upload/images/20190303/20112573hADHzAdyvw.png
    • column:由上而下。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573hdAWUE8KQd.png
    • column-reverse:由下而上。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573MuNqR4HxXc.png
  • justify-content
    元素在主軸上的對齊方式。

    .flex {    
      display: flex;
      justify-content: flex-start | flex-end | center | space-around | space-between;
    }
    

    總共有5種:

    • flex-start:預設值,貼齊主軸起點。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573alDwA2JU5S.png

    • flex-end:貼齊主軸終點。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573vL8wmsc87B.png

    • center:置中。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573bSWThaXiHs.png

    • space-around:平均分配間隔,每個元素都有等距的間隔。
      https://ithelp.ithome.com.tw/upload/images/20190302/201125734m8bSeshhQ.png

    • space-between:平均分配間隔,鄰近邊界元素,會貼齊主軸起點/終點。
      https://ithelp.ithome.com.tw/upload/images/20190302/201125735sPoyVDH1V.png

  • align-items
    元素在交錯軸上的對齊方式。

    .flex {    
      display: flex;
      align-items: flex-start | flex-end | center | stretch | baseline;
    }
    

    總共有5種:

    • flex-start:貼齊交錯軸起點。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573alDwA2JU5S.png
    • flex-end:貼齊交錯軸終點。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573q7cCQckfkw.png
    • center:置中。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573E6FYlsP3CI.png
    • stretch:預設值,若元素未設置高度,將延展至容器的長或寬。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573LlGdbsboGe.png
    • baseline:對齊元素的基線。
      https://ithelp.ithome.com.tw/upload/images/20190302/201125735uku2RsxNk.png
  • flex-wrap
    元素的數量超出容器的範圍時,是否換行。

    .flex {    
      display: flex;
      flex-wrap: wrap | nowrap | wrap-reverse;
    }
    

    總共有3種:

    • wrap:換行。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573MZeNGPw2lt.png

    • nowrap:預設值,不換行,元素的長/寬會壓縮。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573yElqicpwAf.png

    • wrap-reverse:換行反轉。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573URBM5fpn2H.png

  • align-content
    多行的排列方式。

    .flex {    
      display: flex;
      align-content: flex-start | flex-end | center | space-around | space-between | stretch;
    }
    

    總共有6種:

    • flex-start:預設值,貼齊交錯軸起點。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573nRqVGgQ9uI.jpg
    • flex-end:貼齊交錯軸終點。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573RN28LN29l0.jpg
    • center:置中。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573CtNXCmeC5s.jpg
    • space-around:平均分配間隔,每行上下都有等距的間隔。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573e7bqwErlHR.jpg
    • space-between:平均分配間隔,鄰近邊界行,會貼齊交錯軸起點/終點。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573gzceKGy5l3.jpg
    • stretch:若元素未設置高度,會延展至該行的高度。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573zteRUPnAuP.jpg

內部元素的屬性

剛剛介紹的都是flex container(容器)的屬性,每個屬性值的設定,影響的是包含的所有元素,如若我們要特別設定某個元素,可以在該元素的屬性值上設定。

  • align-self
    設定該元素在交錯軸上的對齊方式。
    以box2為例:
    .flex {    
      display: flex;
    }
    .item2 {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    
    總共有6種:
    • auto:預設值,使用align-items的設定。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573pOS2WRn1Me.jpg
    • flex-start:貼齊交錯軸起點。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573pOS2WRn1Me.jpg
    • flex-end:貼齊交錯軸終點。
      https://ithelp.ithome.com.tw/upload/images/20190302/201125739fHHufhyzU.jpg
    • center:置中。
      https://ithelp.ithome.com.tw/upload/images/20190302/201125739PYZgPefqJ.jpg
    • baseline:對齊元素的基線。
      https://ithelp.ithome.com.tw/upload/images/20190302/201125733JNgIFPMde.jpg
    • stretch:若元素未設置高度,將延展至容器的長或寬。
      https://ithelp.ithome.com.tw/upload/images/20190302/20112573JegI1gsr8s.jpg
  • order
    自訂個別元素的排列順序,由小到大依序排列。
    .item1 {    
      order: 3;
    }
    .item2 {
      order: 1;
    }
    .item3 {
      order: 2;
    }
    
    https://ithelp.ithome.com.tw/upload/images/20190302/20112573LYjH2i4rKB.jpg

以上所介紹的,是Flexbox的基礎,搭配各種不同的屬性值,可以呈現千變萬化的排版方式。

還有一個元素的屬性值「flex」,比較進階,我打算下個篇幅再介紹。

最後,來個小小的應用練習,使用flex排出如下的左邊logo圖,右邊menu的header吧。

https://ithelp.ithome.com.tw/upload/images/20190303/20112573v8CWZ58pMH.jpg

重點提示:該如何讓logo圖與menu群組分別置於header的兩側呢?可以使用margin-right: auto;的技巧,把menu群組推到另一側。

參考資料:
CSS Flexible Box Layout


尚未有邦友留言

立即登入留言