CSS Flex

介紹Flex相關細節及與float、box-sizing差別

關於Flex

分為父元素及子元素的設定，後續屬性會詳細介紹，先來了解脈絡與內容。

與flaot、box-sizing差別

flex一次擁有，既有橫排也會幫忙算寬度，讓畫面不至於爆掉寬度跑到第二行。

排版進程

table -> float->inline-block->box->flex

Flex三大特性(RWD更方便)

延展比 flex-grow
收縮比 flex-shrink
基本比 flex-basis
也就是Flex自動幫你算尺寸

什麼是Flex資料流

以主軸及次軸(交叉軸)來看，看直向為主軸還是橫向為主軸，另一方向就為次軸，橫向由左至右，直向由上至下。

白話理解為看你往哪流，流超過範圍到下一排繼續流。

一般flex設定為橫的，所以主軸及對應的交叉軸流向如下:

如flex設定為直的(flex-direction: column;)，主軸及交叉軸就改成如下:

父層(父元素/外容器)設定之Flex項目:

Flex 外容器屬性：

display
flex-flow
– flex-wrap
– flex-direction
justify-content
align-items

display

Flex使用需要宣告 display: flex ，此設定在父層，除了 flex 外，還有一個 inline-flex，作用類似於 inline-block + flex。

1
2
3

display: flex;
/* or */
display: inline-flex;

flex-flow

該flex-flow屬性是用於設置 flex-direction和 flex-wrap屬性的簡寫屬性:

1 2	/* flex-flow: flex-dtrection flex-wrap */ flex-flow: row wrap;

flex-wrap

設定換行 flex-wrap: wrap此設定在display之後設定，同樣父層，分為換行、不換行、換行時反轉:

flex-wrap: wrap;
/* or */
flex-wrap: nowrap;
/* or */
flex-wrap: wrap-reverse;

flex-direction

flex-direction:直排橫排隨你控制-走向，分為水平反轉、轉為垂直、垂直反轉

justify-content

資料流的對齊 justify-content: flex-(靠左)start/(置中)center/(靠右)flex-end

資料流的間距 justify-content: (空間分配在左右)space-around/(空間分配在之間)space-between

align-items

align開頭就是所謂次軸(交叉軸)
用法如下:

1	align-items: flex-start \| flex-end \| center \| baseline \| stretch;

(示範圖建立在資料流為橫向時)

align-content

交叉軸的對齊-多行間距:
用法如下:

1	align-content: flex-start \| flex-end \| center \| space-between \| space-around \| stretch;

示範圖如下:

子層(子元素/內元件)設定之Flex項目:

Flex 內元件屬性：

flex
– flex-grow
– flex-shrink
– flex-basis
order
align-self

Flex

Flex 是縮寫，裡面可一併設置依序包含三個屬性 flex-grow、flex-shrink 和 flex-basis。

例如，flex: 1 0 10px; 會把項目屬性設爲 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。

屬性的默認設置是 flex: 0 1 auto;。

flex-grow

flex-grow 元件的伸展性屬性，接受數值作爲屬性值，會在容器太大時對子元素作出調整。

如果一個項目的 flex-grow 屬性值爲 1，另一個項目的 flex-grow 屬性值爲 3，那麼值爲 3 的一個會較另一個擴大 3 倍。

flex-shrink

首先介紹的是 flex-shrink 元件的收縮性屬性。使用之後，如果 flex 容器太小，則子元素會自動縮小。當容器的寬度小於裏面所有子元素的寬度之和時，所有子元素都會自動壓縮。

flex-shrink 接受數值作爲屬性值。數值越大，則該元素與其他元素相比會被壓縮得更厲害。比如，一個項目的 flex-shrink 屬性值爲 1，另一個項目的 flex-shrink 屬性值爲 3，那麼後者相比前者會受到 3 倍壓縮。

flex-basis

使用 flex-basis 屬性設置元素的初始大小
flex-basis 屬性定義了在使用 CSS 的 flex-shrink 或 flex-grow 屬性對元素進行調整前，元素的初始大小。

flex-basis 屬性的單位與其他表示尺寸的屬性的單位一致（px、em、% 等）。如果值爲 auto，則項目的尺寸隨內容調整。

order

使用 order 屬性重新排列子元素，order 屬性告訴 CSS flex 容器裏子元素的順序。默認情況下，項目排列順序與源 HTML 文件中順序相同。這個屬性接受數字作爲參數，可以使用負數，默認數值為0。

以程式碼輔助呈現突來說明:

<div class="flex-container">
/* 紅色區塊 */
  <div style="order: 0">1</div>
/* 綠色區塊 */
  <div style="order: 0">2</div>
/* 紫色區塊 */
  <div style="order: 0">3</div>
</div>

修改div:2 的order為-1 :

<div class="flex-container">
/* 紅色區塊 */
  <div style="order: 0">1</div>
/* 綠色區塊 */
  <div style="order: -1">2</div>
/* 紫色區塊 */
  <div style="order: 0">3</div>
</div>

進階示範:

<!-- 假設前提已使用了wrap換行 -->
<div class="flex-container">
/* 淡紅色區塊 */
  <div style="order: 0">1</div>
/* 淡綠色區塊 */
  <div style="order: 0">2</div>
/* 淡藍色區塊 */
  <div style="order: 0">3</div>
/* 紅色區塊 */
  <div style="order: 0">4</div>
/* 綠色區塊 */
  <div style="order: 0">5</div>
/* 藍色區塊 */
  <div style="order: 0">6</div>
</div>

修改順序，如order數值一樣，以程式碼優先撰寫者為先，如示範案例，div2優先於div5撰寫，儘管數值皆設定order -1，div2優先顯示於div5前。

<!-- 假設前提已使用了wrap換行 -->
<div class="flex-container">
/* 淡紅色區塊 */
  <div style="order: 0">1</div>
/* 淡綠色區塊 */
  <div style="order: -1">2</div>
/* 淡藍色區塊 */
  <div style="order: 0">3</div>
/* 紅色區塊 */
  <div style="order: -2">4</div>
/* 綠色區塊 */
  <div style="order: -1">5</div>
/* 藍色區塊 */
  <div style="order: 0">6</div>
</div>

align-self

使用 align-self 屬性
flex 子項目的最後一個屬性是 align-self。這個屬性允許你調整單個子元素自己的對齊方式，而不會影響到全部子元素。因爲 float、clear 和 vertical-align 等調整對齊方式的屬性都不能應用於 flex 子元素，所以這個屬性顯得十分有用。

align-self 可設置的值與 align-items 的一樣，並且它會覆蓋 align-items 所設置的值。

參考資料:
W3C CSS Flexbox
圖解：CSS Flex 屬性一點也不難
 深入解析 CSS Flexbox
AMOS 玩轉 CSS FLEX | CSS教學 | 網頁教學 | 網頁設計