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)
布局维度 1D (水平或垂直) 2D (水平和垂直) 1D (垂直)
最适用于 组件对齐 整页面结构 多列文本
布局灵活性 高 (顺序和大小) 非常高 (区域定义) 低 (仅自动分列)
子元素的控制 灵活 定义清晰 难以控制
布局意图 内容驱动 布局驱动 文本驱动

总结

  • 弹性盒子 (Flexbox) 非常适合在行内对齐元素，比如页眉或卡片列表。
  • 网格 (Grid) 适用于设计整个布局，比如网页的结构。
  • 列 (Columns) 最适合将文本排版为多列，比如文章或博客。

您也可以根据需要组合使用它们。例如，您可以使用 Grid 设计整体布局，并使用 Flex 对齐内部元素。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

与列布局相关的CSS属性`overflow` 和 `contain` 属性