Articles
CSS 簡介
Flexbox、Grid 和 Column 佈局的比較

Flexbox、Grid 和 Column 佈局的比較

本文解釋了 Flexbox、Grid 和 Column 佈局之間的比較。

您將了解 Flexbox、Grid 和 Column 佈局之間的差異，以及它們各自適用的情況。

YouTube Video

預覽的HTML

css-layout-comparision.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <title>CSS Properties Example</title>
 7  <link rel="stylesheet" href="css-base.css">
 8  <link rel="stylesheet" href="css-layout-comparision.css">
 9</head>
10<body>
11  <!-- Header -->
12  <header>
13      <h1>CSS Properties For Layout</h1>
14  </header>
15  <!-- Main content -->
16  <main>
17    <header>
18        <h2>Layout Comparision</h2>
19    </header>
20    <article>
21      <h3>flex</h3>
22      <section>
23        <section class="sample-view">
24          <div class="flex-container">
25            <div class="flex-item">Item 1</div>
26            <div class="flex-item">Item 2</div>
27            <div class="flex-item">Item 3</div>
28            <div class="flex-item">Item 4</div>
29            <div class="flex-item">Item 5</div>
30            <div class="flex-item">Item 6</div>
31            <div class="flex-item">Item 7</div>
32            <div class="flex-item">Item 8</div>
33            <div class="flex-item">Item 9</div>
34          </div>
35        </section>
36      </section>
37    </article>
38    <article>
39      <h3>grid</h3>
40      <section>
41        <section class="sample-view">
42          <div class="grid-box">
43            <div class="grid-item item1">Item 1</div>
44            <div class="grid-item item2">Item 2</div>
45            <div class="grid-item item3">Item 3</div>
46            <div class="grid-item item4">Item 4</div>
47            <div class="grid-item item5">Item 5</div>
48            <div class="grid-item item6">Item 6</div>
49            <div class="grid-item item7">Item 7</div>
50            <div class="grid-item item8">Item 8</div>
51            <div class="grid-item item9">Item 9</div>
52          </div>
53        </section>
54      </section>
55    </article>
56    <article>
57      <h3>column</h3>
58      <section>
59        <section class="sample-view">
60          <section class="columns-container">
61            <p class="columns-item">Item 1</p>
62            <p class="columns-item">Item 2</p>
63            <p class="columns-item">Item 3</p>
64            <p class="columns-item">Item 4</p>
65            <p class="columns-item">Item 5</p>
66            <p class="columns-item">Item 6</p>
67            <p class="columns-item">Item 7</p>
68            <p class="columns-item">Item 8</p>
69            <p class="columns-item">Item 9</p>
70          </section>
71        </section>
72      </section>
73    </article>
74  </main>
75</body>
76</html>

Flexbox、Grid 和 Column 佈局的比較

CSS 的 flex、grid 和 columns 都是用於 對齊和佈局元素 的技術，但每種技術都有其自身的優勢和理想的使用情境。以下通過比較來清晰說明它們的差異。

Flexbox（display: flex） 

 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    align-items: center;
 5    flex-wrap: wrap;
 6    background-color: lightblue;
 7    height: 200px;
 8}
 9
10.flex-item {
11    background-color: lightskyblue;
12    padding: 10px;
13    margin: 5px;
14    width: 70px;
15    height: auto;
16}

特點

  • 適用於 單方向佈局——水平方向或垂直方向。
  • 允許靈活控制元素的 順序和靈活性。
  • 最適用於像導航欄和按鈕組等的 小型佈局。

優點

  • 自動調整子元素的大小。
  • 您可以使用屬性如 flex-direction、flex-wrap 和 order 來更改元素順序。

更改顯示順序的示例

flex-direction

作為更改顯示順序的示例，讓我們將 flex-direction 屬性設置為 column。

1.flex-container {
2    flex-direction: column;
3}

當 flex-direction 設置為 column 時，項目將從水平布局更改為垂直布局。布局將從從左到右更改為從上到下。

flex-wrap

為 flex-wrap 屬性設定 wrap-reverse 時，會將換行的順序從通常的方向反轉。

1.flex-container {
2    flex-direction: row;
3    flex-wrap: wrap-reverse;
4}

如此一來，行順序將會從下往上堆疊顯示。

1.flex-container {
2    flex-direction: column;
3    flex-wrap: wrap-reverse;
4}

當 flex-direction 設為 column 並且 flex-wrap 設為 wrap-reverse 時，項目會以垂直方向排列，而列會從右至左換行。如同這個範例，列的順序會從通常的左至右反轉，項目會從右至左添加。

Grid（display: grid） 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 100px 100px;
 4    grid-template-rows: 50px 50px 50px;
 5    gap: 20px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16}

特點

  • 適用於 二維佈局。
  • 允許 清楚定義 基於網格的佈局。
  • 非常適合更複雜的設計和整體頁面結構。

優點

  • 可以同時定義行和列。
  • 可以使用命名區域 (grid-area) 放置區塊。
  • 子元素可以在網格中自由放置，允許靈活控制順序。

更改顯示順序的示例

作為更改顯示順序的示例，讓我們使用 grid-template-areas 屬性來設置顯示位置。

 1.grid-box {
 2    grid-template-areas:
 3        "item1 item4 item5"
 4        "item2 item6 item7"
 5        "item3 item8 item9";
 6}
 7
 8.item1 { grid-area: item1; }
 9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }

在這個範例中，使用 grid-template-areas 屬性以視覺化方式定義整體網格佈局，並為每個單元格分配區域名稱。接著，透過為每個子元素賦予相對應的 grid-area 名稱，可以將它們放置在所需的位置。透過這種方式使用 grid，不僅可以自由更換元素的顯示順序，還能輕鬆創建複雜且獨特的佈局。

Columns（column-count, column-width） 

 1.columns-container {
 2    background-color: lightblue;
 3    columns: 100px 3;
 4    column-gap: 20px;
 5    column-rule: 2px solid #333;
 6    padding: 10px;
 7}
 8
 9.columns-item {
10    background-color: lightskyblue;
11    text-align: center;
12    margin: 20px auto;
13    color: white;
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    font-size: 1.2rem;
18    border: 1px solid #ccc;
19    height: 50px;
20}

特點

  • 您可以輕鬆創建 雜誌風格的欄。
  • 適用於 流式文本內容。
  • 遵循 HTML 源碼順序，因此不太適合控制元素順序。

優點

  • 可以 自動分割長文本。
  • 您可以非常輕鬆地創建 報紙風格的布局。

比較表格

功能 / 使用情境 Flexbox（彈性盒子） Grid（格線） Columns（多欄）
佈局維度 一維（水平或垂直） 二維（水平和垂直） 一維（垂直）
最適用途 元素排列 整頁佈局 多欄文本
佈局靈活性 高（順序與大小） 非常高（區域定義） 低（僅自動分欄）
子元素控制 靈活 定義明確 難以控制
佈局意圖 以內容為導向 以佈局為導向 以文本為導向

總結

  • Flexbox（彈性盒子） 適用於需要 將元素排列成一行 的情境，例如標頭或卡片列表。
  • Grid（格線） 適合用於需要 設計整體佈局 的情境，例如網頁結構。
  • Columns（多欄） 最適用於 將文本格式化為多欄 的情境，例如文章或部落格。

您也可以根據需要 將它們結合使用。例如，您可以用 Grid 設計整體佈局，並用 Flex 對齊內部元素。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

與欄佈局相關的CSS屬性`overflow` 和 `contain` 屬性