Porównanie układów Flexbox, Grid i Kolumny
Ten artykuł wyjaśnia porównanie układów Flexbox, Grid i Kolumny.
Dowiesz się, jakie są różnice między układami Flexbox, Grid i Kolumny oraz kiedy je stosować.
YouTube Video
HTML do podglądu
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>Porównanie układów Flexbox, Grid i Kolumny
flex, grid i columns w CSS to techniki służące do wyrównywania i układania elementów, z których każda ma swoje zalety i idealne przypadki użycia. Poniżej znajduje się jasne wyjaśnienie ich różnic na podstawie porównania.
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}Funkcje
- Odpowiedni dla jednokierunkowych układów — poziomych lub pionowych.
- Umożliwia elastyczne kontrolowanie kolejności i elastyczności elementów.
- Najlepiej nadaje się do małych układów, takich jak paski nawigacyjne i grupy przycisków.
Zalety
- Automatycznie dostosowuje rozmiar elementów potomnych.
- Możesz zmienić kolejność elementów za pomocą właściwości takich jak
flex-direction,flex-wrapiorder.
Przykład zmiany kolejności wyświetlania
Jako przykład zmiany kolejności wyświetlania, ustawmy właściwość flex-direction na column.
1.flex-container {
2 flex-direction: column;
3}Gdy flex-direction jest ustawione na column, elementy zmieniają układ z poziomego na pionowy. Układ zmienia się z od lewej do prawej na od góry do dołu.
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}Funkcje
- Idealny dla dwuwymiarowych układów.
- Umożliwia wyraźne zdefiniowanie układów opartych na siatce.
- Świetny do bardziej złożonych projektów i ogólnej struktury strony.
Zalety
- Wiersze i kolumny mogą być definiowane jednocześnie.
- Sekcje można rozmieszczać przy użyciu nazwanych obszarów (
grid-area). - Elementy potomne można dowolnie rozmieszczać w siatce, co umożliwia elastyczną kontrolę kolejności.
Przykład zmiany kolejności wyświetlania
Jako przykład zmiany kolejności wyświetlania, użyjemy właściwości grid-template-areas, aby ustawić pozycje wyświetlania.
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; }Jak widać, grid można używać nie tylko do zmiany kolejności wyświetlania, ale także do tworzenia unikalnych układów.
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}Funkcje
- Możesz łatwo tworzyć kolumny w stylu magazynowym.
- Idealny dla tekstu o płynnym układzie.
- Trzyma się kolejności zgodnej z HTML, co czyni go mniej odpowiednim do kontrolowania kolejności elementów.
Zalety
- Może automatycznie podzielić dłuższe teksty.
- Możesz bardzo łatwo tworzyć układy w stylu gazetowym.
Tabela porównawcza
| Cechy / Zastosowanie | Flexbox | Grid | Kolumny |
|---|---|---|---|
| Wymiary układu | 1D (poziomo lub pionowo) | 2D (poziomo i pionowo) | 1D (pionowo) |
| Najlepszy do | Wyrównania elementów | Pełnej struktury strony | Tekstu wielokolumnowego |
| Elastyczność układu | Wysoka (kolejność i rozmiar) | Bardzo wysoka (definicja obszaru) | Niska (tylko automatyczny podział) |
| Kontrola nad elementami potomnymi | Elastyczna | Wyraźnie zdefiniowana | Trudna do kontroli |
| Intencje układu | Napędzany zawartością | Napędzany układem | Napędzany tekstem |
Podsumowanie
- Flexbox jest idealny, gdy chcesz wyrównać elementy w rzędzie, na przykład nagłówki lub listy kart.
- Grid nadaje się, gdy chcesz zaprojektować cały układ, na przykład strukturę strony internetowej.
- Kolumny są najlepsze, gdy chcesz sformatować tekst w wiele kolumn, na przykład w artykułach lub blogach.
Możesz także łączyć je w razie potrzeby. Na przykład możesz zaprojektować ogólny układ za pomocą Grid, a wyrównać wewnętrzne elementy za pomocą Flex.
Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.