Confronto tra Flexbox, Grid e Column Layouts
Questo articolo spiega il confronto tra Flexbox, Grid e Column Layouts.
Imparerai le differenze tra Flexbox, Grid e Column Layouts, e quando utilizzare ciascuno.
YouTube Video
HTML per Anteprima
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>Confronto tra Flexbox, Grid e Column Layouts
I metodi CSS flex, grid e columns sono tutte tecniche per allineare e disporre gli elementi, ma ognuna di esse ha i propri punti di forza e casi d'uso ideali. Di seguito trovi una spiegazione chiara delle loro differenze attraverso un confronto.
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}Caratteristiche
- Adatto per layout unidirezionali—orizzontale o verticale.
- Consente un controllo flessibile sull'ordine e la flessibilità degli elementi.
- Ideale per layout di piccole dimensioni come barre di navigazione e gruppi di pulsanti.
Vantaggi
- Adatta automaticamente la dimensione degli elementi figlio.
- Puoi cambiare l'ordine degli elementi utilizzando proprietà come
flex-direction,flex-wrapeorder.
Esempio di modifica dell'ordine di visualizzazione
Come esempio di modifica dell'ordine di visualizzazione, impostiamo la proprietà flex-direction su column.
1.flex-container {
2 flex-direction: column;
3}Quando flex-direction è impostato su column, gli elementi passano da un layout orizzontale a uno verticale. Il layout cambia da sinistra a destra a dall'alto verso il basso.
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}Caratteristiche
- Ideale per layout bidimensionali.
- Consente una chiara definizione di layout basati su griglie.
- Perfetto per design più complessi e per la struttura generale della pagina.
Vantaggi
- Righe e colonne possono essere definite contemporaneamente.
- Le sezioni possono essere posizionate utilizzando aree denominate (
grid-area). - Gli elementi figlio possono essere posizionati liberamente all'interno della griglia, consentendo un controllo flessibile dell'ordine.
Esempio di modifica dell'ordine di visualizzazione
Come esempio di modifica dell'ordine di visualizzazione, utilizziamo la proprietà grid-template-areas per impostare le posizioni di visualizzazione.
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; }Come puoi vedere, grid può essere utilizzato non solo per modificare l'ordine di visualizzazione ma anche per creare layout unici.
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}Caratteristiche
- Puoi facilmente creare colonne in stile rivista.
- Ideale per contenuti di testo scorrevoli.
- Segue l'ordine del sorgente HTML, rendendolo meno adatto al controllo dell'ordine degli elementi.
Vantaggi
- Può suddividere automaticamente testi lunghi.
- Puoi molto facilmente creare layout in stile giornale.
Tabella comparativa
| Funzionalità / Caso d'uso | Flexbox | Grid | Colonne |
|---|---|---|---|
| Dimensione del Layout | 1D (orizzontale o verticale) | 2D (orizzontale e verticale) | 1D (verticale) |
| Ideale per | Allineamento componenti | Struttura di una pagina intera | Testo su più colonne |
| Flessibilità del Layout | Alta (ordine e dimensione) | Molto alta (definizione delle aree) | Bassa (solo suddivisione automatica) |
| Controllo degli elementi figli | Flessibile | Chiaramente definito | Difficile da controllare |
| Intenzione del Layout | Orientato al contenuto | Orientato al layout | Orientato al testo |
Riepilogo
- Flexbox è ideale quando si desidera allineare elementi in una riga, come intestazioni o elenchi di schede.
- Grid è adatto quando si vuole progettare l'intero layout, come la struttura di una pagina web.
- Le colonne sono ideali quando si desidera formattare il testo su più colonne, come in articoli o blog.
Puoi anche combinarli secondo necessità. Ad esempio, puoi progettare il layout complessivo con Grid e allineare gli elementi interni con Flex.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.