Vergelijking van Flexbox-, Grid- en Kolomlay-outs
Dit artikel legt de vergelijking uit tussen Flexbox-, Grid- en Kolomlay-outs.
U leert de verschillen tussen Flexbox-, Grid- en Kolomlay-outs en wanneer u ze moet gebruiken.
YouTube Video
HTML voor Voorbeeldweergave
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>Vergelijking van Flexbox-, Grid- en Kolomlay-outs
CSS flex, grid en columns zijn allemaal technieken voor het uitlijnen en plaatsen van elementen, maar elk heeft zijn eigen sterke punten en ideale gebruikscases. Hieronder volgt een duidelijke uitleg van hun verschillen door middel van een vergelijking.
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}Kenmerken
- Geschikt voor eendimensionale lay-outs—ofwel horizontaal of verticaal.
- Biedt flexibele controle over de volgorde en flexibiliteit van elementen.
- Het meest geschikt voor kleinschalige lay-outs, zoals navigatiebalken en groepen knoppen.
Voordelen
- Past automatisch de grootte van elementen aan onderliggende elementen aan.
- Je kunt de volgorde van elementen veranderen met eigenschappen zoals
flex-direction,flex-wrapenorder.
Voorbeeld van het veranderen van de weergavevolgorde
flex-direction
Als een voorbeeld van het veranderen van de weergavevolgorde, laten we de eigenschap flex-direction instellen op column.
1.flex-container {
2 flex-direction: column;
3}Wanneer flex-direction is ingesteld op column, veranderen de items van een horizontale opmaak naar een verticale opmaak. De opmaak verandert van links-naar-rechts naar boven-naar-beneden.
flex-wrap
Instellen van de ommezwaai-ommezwaai voor de eigenschap "flex-wrap" keert de volgorde van de omwikkelde lijnen om vanuit de gebruikelijke richting.
1.flex-container {
2 flex-direction: row;
3 wrap-reverse: wrap-reverse
4}Zo worden de regels van onder naar boven gestapeld.
1.flex-container {
2 flex-direction: column;
3 wrap-reverse: wrap-reverse
4}Wanneer de Flex-directie is ingesteld op "Twee" en "Flex-wrap" is ingesteld op "Wrap-reverse," worden de items verticaal gerangschikt terwijl de kolommen van rechts naar links gaan. Zoals in dit voorbeeld, wordt de kolomvolgorde omgekeerd van de gebruikelijke links naar rechts, en items worden toegevoegd van rechts naar links.
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}Kenmerken
- Ideaal voor tweedimensionale lay-outs.
- Maakt een duidelijke definitie van rastergebaseerde lay-outs mogelijk.
- Uitstekend voor complexere ontwerpen en de algemene paginstructuur.
Voordelen
- Rijen en kolommen kunnen tegelijkertijd worden gedefinieerd.
- Secties kunnen worden geplaatst met behulp van benoemde gebieden (
grid-area). - Kindelementen kunnen vrij binnen het raster worden geplaatst, wat flexibele controle over de volgorde mogelijk maakt.
Voorbeeld van het veranderen van de weergavevolgorde
Als een voorbeeld van het veranderen van de weergavevolgorde, laten we de eigenschap grid-template-areas gebruiken om de weergaveposities in te stellen.
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; }In dit voorbeeld wordt de eigenschap "grid-template-gebieden" gebruikt om de totale rasterindeling visueel te definiëren en gebiedsnamen toe te wijzen aan elke cel. Dan, door het toewijzen van de corresponderende naam van het raster-gebied aan elk kind element, worden ze geplaatst in de gewenste posities. Door op deze manier gebruik te maken van een grid kunt u niet alleen de displayvolgorde van elementen vrij wijzigen, maar ook gemakkelijk complexe en unieke lay-outs creëren.
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}Kenmerken
- Je kunt eenvoudig kolommen in tijdschriftstijl maken.
- Ideaal voor vloeiende tekstinhoud.
- Volgt de HTML-bronvolgorde, waardoor het minder geschikt is voor het regelen van de volgorde van elementen.
Voordelen
- Kan lange teksten automatisch verdelen.
- Je kunt heel eenvoudig indelingen in krantenstijl maken.
Vergelijkingstabel
| Kenmerk / Gebruiksscenario | Flexbox | Raster | Kolommen |
|---|---|---|---|
| Layoutdimensie | 1D (horizontaal of verticaal) | 2D (horizontaal & verticaal) | 1D (verticaal) |
| Beste voor | Componentuitlijning | Volledige paginastructuur | Meerkolomstekst |
| Layoutflexibiliteit | Hoog (volgorde & grootte) | Zeer hoog (gebiedsdefinitie) | Laag (alleen automatisch splitsen) |
| Controleren van kinderen | Flexibel | Duidelijk gedefinieerd | Moeilijk te controleren |
| Layoutrichting | Inhoudgericht | Layoutgericht | Tekstgericht |
Samenvatting
- Flexbox is ideaal als je elementen op een rij wilt uitlijnen, zoals kopteksten of kaartenlijsten.
- Raster is geschikt als je de volledige layout wilt ontwerpen, zoals de structuur van een webpagina.
- Kolommen zijn het beste als je tekst in meerdere kolommen wilt opmaken, zoals in artikelen of blogs.
Je kunt ze ook combineren indien nodig. Je kunt bijvoorbeeld de algemene indeling ontwerpen met Grid en interne elementen uitlijnen met Flex.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.