Hike News
Hike News

Flexbox 排版

CSS, 屬性

簡介

FLEX 的對齊方法就類似是 Google 文件 或 WORD 的文字對齊工具

文件對齊方式

CSS Flexible Box Layout Module

在 W3C 有介紹到 Flexbox 就是為了優化設計的 CSS 模型 ( Module ) ，最重要的是 具有靈活佈局的功能 ，這使用在自適應網頁上排版設計就變得更加簡單方便。

而且用 Can I use 查詢幾乎所有的瀏覽器都有支援

Flexbox 的架構

要使用 Flexbox 模型佈局，就必須在全部元素外加上一個 外層容器 包著並設定，而全部被包著的元素才會是可排版佈局的 內層元件

外層容器

在 HTML 建立一個外層範圍 container 

1
<div class="container"></div>

並在 CSS 設定範圍內具有 Flexbox 佈局功能

1
2
3
.container {
  display: flex
}

  • 軸線

    • 在模型內的軸線稱為 主軸 ( main axis ) 和 交錯軸 ( cross axis ) 。
    • 軸線不能稱為 水平軸 和 垂直軸，因為主軸可以是左右水平方向也可以是上下垂直方向。

  • 屬性

    • 外層容器的屬性為全部內層相同設定

內層元件

在 container 放入 item 作為 內層元件 ，然後才把文字、圖片相關內容的元素放到 item 內。

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>
  • 內層元件
    • 必須被 外層容器 包著才會作用
    • 作為可靈活排版的元件
    • 避免排版被內容的設定影響，文字、圖片相關內容的元素要放到元件內

Flexbox 的屬性

外層容器

  • display 設定值分兩種
    • flex 為區塊元素
    • inline-flex 為行內元素
1
2
3
4
.container {
  display: flex
  display: inline-flex
}

行內元素 inline-flex 會因為 內容元件 的寬高而改變外層大小

在沒設定寬度時，2 者差別如下圖

display

內層元件

  • 排列方式
    • flex-direction 元件排列順序
    • flex-wrap 換行順序
  • 元件對齊

排列方向 flex-direction

  • 排列方式分兩種 水平 和 垂直
    • 水平排列又分 靠左 (向右依序排列)、靠右對齊 (向左依序排列)

水平排列

1
2
3
4
5
6
7
.container {
  display:flex;
  /* 靠左 */
  flex-direction: row;
  /* 靠右 */
  flex-direction: row-reverse;
}

display

垂直排列

轉成直式的 由上至下、由下至上

1
2
3
4
5
6
7
.container {
  display:flex;
  /* 由上至下 */
  flex-direction: column;
  /* 由下至上 */
  flex-direction: column-reverse;
}

display

換行順序

預設在內容太多時，預設會自動縮小全部內容的寬度，讓全部內容都能被看到，但這樣就會改變原來的樣子

nowrap

所以就可使用換行 flex-wrap: wrap ，每行下方的行間都會平均等高，相反的 flex-wrap: wrap-reverse; 平均等高的行間會在每行上方。

1
2
3
4
5
6
7
8
9
10
11
.container {
  display:flex;
  /* 貼齊外層上邊排列
     內容至超過外層寬後換行
     方向由上至下 */
  flex-wrap: wrap;
  /* 貼齊外層下邊排列
     內容至超過外層寬後換行
     方向由下至上 */
  flex-wrap: wrap-reverse;
}

wrap

對齊

  • 水平 X 軸對齊 justify-content
  • 垂直 Y 軸對齊 分兩種
    • 當內容只有一行時 align-items
    • 內容有多行時 align-content

水平的左右對齊

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  display:flex;
  /* 預設靠左 */
  justify-content: flex-start;
  /* 靠右 */
  justify-content: flex-end;
  /* 置中 */
  justify-content: center;
  /* 把內容和內容之間的空間均分到內容的左右 */
  justify-content: space-around;
  /* 把內容最左、最右的貼齊在外層邊上後平均每個內容之間的空間 */
  justify-content: space-between;  
}

justify-content

垂直的上下對齊

上下對齊分 單行的 align-items 、多行的 align-items 屬性對齊方式，值除了多 space-around 、space-between 的不同，其他都是相同的。

單行和多行的上下對齊差別在

單行會有每列的間距、多行不會有每列之間的間距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.container {
  display:flex;
  /* 單行 */
  /* 預設內容會貼齊外層上邊 */
  align-items: stretch;
  /* 上下置中 */
  align-items: center;
  /* 對齊外層上邊 */
  align-items: flex-start;
  /* 對齊外層下邊 */
  align-items: flex-end;  
  
  /* 多行 */
  /* 預設貼齊外層上邊、下方保留每行的平均間距、方向由上至下 */
  align-content: stretch;
  /* 上下置中 */
  align-content: center;
  /* 對齊外層上邊、內容和內容不留間距排列 */
  align-content: flex-start;
  /* 對齊外層下邊、內容和內容不留間距排列 */
  align-content: flex-end; 
  /* 內容和內容換行的空間均分到內容的上下 */
  align-content: space-around;
  /* 最上及最下的內容貼齊在外層邊上後平均每列的間距 */
  align-content: space-between;  
}

align-content

要注意若是有設定換行是使用 flex-wrap: wrap-reverse 由下至上換行時，上下排列的方向就會是相反的由下至上排列。

align-content