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