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 на column.

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

Когда flex-direction установлено на column, элементы меняются с горизонтального расположения на вертикальное. Расположение изменяется с левого-направо на верх-низ.

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 можно использовать не только для изменения порядка отображения, но и для создания уникальных макетов.

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 Столбцы
Измерение макета 1D (горизонтально или вертикально) 2D (горизонтально и вертикально) 1D (вертикально)
Подходит лучше всего для Выравнивания компонентов Общей структуры страницы Текста в несколько колонн
Гибкость макета Высокая (порядок и размер) Очень высокая (определение области) Низкая (только авторазделение)
Контроль над дочерними элементами Гибкий Четко определённый Сложно контролировать
Назначение макета Отталкивается от содержимого Отталкивается от структуры Отталкивается от текста

Резюме

  • Flexbox идеально подходит, когда вы хотите выровнять элементы в ряд, например, заголовки или списки карточек.
  • Grid подходит, если вы хотите спроектировать весь макет, например, структуру веб-страницы.
  • Колонки лучше всего подходят, когда вы хотите разбить текст на несколько колонок, например, в статьях или блогах.

Вы также можете совмещать их по необходимости. Например, вы можете спроектировать общий макет с помощью Grid и выровнять внутренние элементы с помощью Flex.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Свойства CSS, связанные с макетом столбца