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
flex-direction
À 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.
flex-wrap
Définir wrap-reverse pour la propriété flex-wrap inverse l'ordre des lignes enroulées par rapport à la direction habituelle.
1.flex-container {
2 flex-direction: row;
3 flex-wrap: wrap-reverse;
4}De cette manière, les lignes sont affichées en se superposant de bas en haut.
1.flex-container {
2 flex-direction: column;
3 flex-wrap: wrap-reverse;
4}Lorsque flex-direction est défini sur column et flex-wrap sur wrap-reverse, les éléments sont disposés verticalement tandis que les colonnes se replient de droite à gauche. Comme dans cet exemple, l'ordre des colonnes est inversé par rapport à la disposition habituelle de gauche à droite, et les éléments sont ajoutés de droite à gauche.
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; }Dans cet exemple, la propriété grid-template-areas est utilisée pour définir visuellement la disposition globale de la grille et attribuer des noms aux zones de chaque cellule. Ensuite, en attribuant le nom correspondant de grid-area à chaque élément enfant, ceux-ci sont placés aux positions souhaitées. En utilisant grid de cette manière, vous pouvez non seulement modifier librement l'ordre d'affichage des éléments, mais également créer facilement des dispositions complexes et 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.