Comparaison entre Flexbox, Grid et Column Layouts
Cet article explique la comparaison entre Flexbox, Grid et Column Layouts.
Vous apprendrez les différences entre Flexbox, Grid et Column Layouts, et quand utiliser chacun d'eux.
YouTube Video
HTML pour l'aperçu
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>Comparaison entre Flexbox, Grid et Column Layouts
Les techniques CSS flex, grid et columns permettent toutes d'aligner et de disposer des éléments, mais chacune a ses propres forces et cas d'utilisation idéaux. Voici une explication claire de leurs différences à travers une comparaison.
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}Caractéristiques
- Adapté aux mises en page mono-directionnelles — soit horizontales, soit verticales.
- Permet un contrôle flexible sur l'ordre et la flexibilité des éléments.
- Idéal pour les mises en page de petite échelle comme les barres de navigation et les groupes de boutons.
Avantages
- Ajuste automatiquement la taille des éléments enfants.
- Vous pouvez changer l'ordre des éléments en utilisant des propriétés comme
flex-direction,flex-wrapetorder.
Exemple de modification de l'ordre d'affichage
À titre d'exemple de modification de l'ordre d'affichage, définissons la propriété flex-direction sur column.
1.flex-container {
2 flex-direction: column;
3}Lorsque flex-direction est défini sur column, les éléments passent d'une disposition horizontale à une disposition verticale. La disposition change de gauche à droite vers de haut en bas.
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}Caractéristiques
- Idéal pour les mises en page bidimensionnelles.
- Permet une définition claire des mises en page basées sur une grille.
- Parfait pour des conceptions plus complexes et la structure globale d'une page.
Avantages
- Les lignes et colonnes peuvent être définies simultanément.
- Les sections peuvent être placées en utilisant des zones nommées (
grid-area). - Les éléments enfants peuvent être placés librement dans la grille, permettant un contrôle flexible de l'ordre.
Exemple de modification de l'ordre d'affichage
À titre d'exemple de modification de l'ordre d'affichage, utilisons la propriété grid-template-areas pour définir les positions d'affichage.
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; }Comme vous pouvez le voir, grid peut être utilisé non seulement pour changer l'ordre d'affichage, mais aussi pour créer des dispositions uniques.
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}Caractéristiques
- Vous pouvez facilement créer des colonnes de style magazine.
- Idéal pour le contenu textuel fluide.
- Suit l'ordre source du HTML, ce qui le rend moins adapté pour contrôler l'ordre des éléments.
Avantages
- Peut diviser automatiquement les longs textes.
- Vous pouvez très facilement créer des dispositions de style journal.
Tableau de comparaison
| Fonctionnalité / Cas d'utilisation | Flexbox | Grille | Colonnes |
|---|---|---|---|
| Dimension de la mise en page | 1D (horizontal ou vertical) | 2D (horizontal & vertical) | 1D (vertical) |
| Meilleur pour | Alignement des composants | Structure de la page entière | Texte en colonnes multiples |
| Flexibilité de mise en page | Élevée (ordre et taille) | Très élevée (définition des zones) | Faible (division automatique uniquement) |
| Contrôle des enfants | Flexible | Clairement défini | Difficile à contrôler |
| Intention de mise en page | Basée sur le contenu | Basée sur la mise en page | Basée sur le texte |
Résumé
- Flexbox est idéal lorsque vous souhaitez aligner des éléments en ligne, comme des en-têtes ou des listes de cartes.
- Grille est adaptée lorsque vous souhaitez concevoir la totalité de la mise en page, comme la structure d'une page web.
- Colonnes sont idéales lorsque vous souhaitez formater du texte en plusieurs colonnes, comme dans des articles ou des blogs.
Vous pouvez également les combiner selon vos besoins. Par exemple, vous pouvez concevoir la disposition générale avec Grid et aligner les éléments internes avec Flex.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.