關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

CSS3 Flexbox 介紹

Flexbox 彈性盒子,讓CSS區塊布局能更容易更具有彈性,
目前主流瀏覽器都已經有良好的支援,雖然許多功能仍在草案階段,但該項目已受到廣泛支持,在未來勢必成為主流標準之一。

Flex 排版能更優雅的處理不同螢幕尺寸及設備布局,接下來將直接進入他的功能介紹,逐步來了解這裏面的特性及用法

flex 階層關係

在討論功能之前,先要了解 flex主要框架設計理念,

通常,會在最外圍設定一個主要的 flex,在他內部可以包含0到多個區塊。

在外層的這個主要的 flex,就可以用一些參數來控制內部的區塊排版,包括排列方向、總體尺寸等等...

設定 flexbox

因此,先將要設定的主要區塊調設定為 flexbox
例如,這裡用display:flex 來設定一個 div 為 flexbox

div{
    /* flexbox setup */
    display: flex;
}

flex

flex 可以用來設定同一個主元素底下,內部元素的長度分配。

flex 包括了 flex-grow, flex-shrink, flex-basic 這三種屬性

  • flex-grow : 內部元素數量未撐爆外層元素
  • flex-shrink : 內部元素數量多到撐爆外層元素時
  • flex-basic : 內部元素的預設初始寬度

這裡則是型態、範圍及預設

  • flex-grow : 數值 (需>0),預設為1
  • flex-shrink : 數值 (需>0),預設為1
  • flex-basic : 需附加單位(%, px or em..),預設為0

可以直接設定為 flex: auto; flex: initial; flex: none;
其中,設定為none就相對於 0 0 auto;

這張圖可以說明單一設定值的情況

這裡我們先看一些正常情況的相對應關係

div{

    /* one values: flex-grow */
    flex: 1;
    /* two values: flex-grow | flex-shrink */
    flex: 1 2;
    /* Three values: flex-grow | flex-shrink | flex-basis */
    flex: 1 2 10px
}

接下來是幾種設定及相對應關係
當有出現單位時,就會自動設定為 flex-basis 值

div{
    /* Two values: flex-grow | flex-basis */
  flex: 1 30px;
  /* One value, width/height: flex-basis */
  flex: 10em;
  /* Three values: flex-grow | flex-shrink | flex-basis */
  flex: 2 2 10%;
  /* Two values: flex-grow | flex-shrink */
  flex: 2 2;
}

flex-direction 控制排版方向

這裡,我們由外部主要 flexbox ,可以設定這個flexbox的寬及高,再透過 flex-direction 來定內部排列方式

flex-direction 一共有四組參數

div{
        /* flexbox setup */
        display: flex;
        /* flexbox direction*/
        flex-direction: row; //常見水平排列,由左至右,由上而下
        flex-direction: row-reverse; //水平反向排列 
        flex-direction: column; //欄位由上而下,由左至右
        flex-direction: column-reverse; //欄位反向由下而上
}

See the Pen YEOLBO by Adam Ou-Yang (@adon988) on CodePen.

justify-content 水平排列對齊設定

justify-content 這個屬性可以讓我們設定元件在水平軸(main axis)的 space 分布狀況,這裡僅列出幾個作為參考

div{
        /* flexbox setup */
        display: flex;
        /* flexbox justify */
        justify-content: start;
        justify-content: center;
        justify-content: flex-end;
        justify-content: space-between; //元件之間保持空間距離
        justify-content: space-around; //左右保持一點空間,且元件間保持空間距離
        justify-content: space-evenly; //元件在整體空間保持一樣的空間距離
}

See the Pen wPExYj by Adam Ou-Yang (@adon988) on CodePen.

詳細各種參數可以直接參考這裡,底下這張圖列出目前可以使用的相關參數及示意:

align-items 垂直排列對齊設定

針對同一行的元素進行對齊排列處理,跟justify-content很像,但是操作的是垂直軸(cross-axis)的 space 分布狀況

div{
        /* flexbox setup */
        display: flex;
        /* flexbox justify */
        align-items:flex-start; 
        align-items:flex-end;
        align-items: center;
        align-items:stretch;
        align-items: baseline;
}

See the Pen align-items by Adam Ou-Yang (@adon988) on CodePen.

詳細各種參數可以直接參考這裡,其他更多align-items 可以參考下圖

align-self

從字面上來看,大概就能猜出這個是用在單一元素
在外層flexbox,如果設定了align-items,在內部的個別元素就能透過 align-self 來複寫外層的設定。
如果這當中有 cross-axis 的元素 margin 設定為 0 auto,所設定的 align-self 就會被忽略掉。

在需要的時候,可以直接在這裡查詢相關參數,此部分將不作範例解釋

其他細部操作

接下來介紹的是偏向於較為細節的操作,例如換行、排序...

flex-wrap 自動換行

當我們將外層定義為 flex ,內部元素如果以行的方式排列,超過一定數量就會撐爆外層,
這時就要透過 flex-wrap 來定義,自動換行
這裡列出相關設定值

div{
    flex-wrap: nowrap; //不換行
    flex-wrap: wrap; //自動換行
    flex-wrap: wrap-reverse; //反向+換行
}

See the Pen flex-wrap by Adam Ou-Yang (@adon988) on CodePen.

Order 排序

flexbox 支援在子元素CSS裡面添加 order 來指定排序

See the Pen Order by Adam Ou-Yang (@adon988) on CodePen.

flex-flow = flex-direction + flex-wrap

flex-flow 包含了flew-direction 及 flew-wrap 兩種特性。

在設定時,可以個別或同時設定方向及換行

例如,同時設定

flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

例如,僅設定方向或換行

flex-flow: row;
flex-flow: wrap;

參考: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout


如果你喜歡我們的文章內容,請在這裡按個讚



最新文章推薦