Jämförelse mellan Flexbox, Grid och kolumnlayouter
Denna artikel förklarar jämförelsen mellan Flexbox, Grid och kolumnlayouter.
Du kommer att lära dig skillnaderna mellan Flexbox, Grid och kolumnlayouter, och när du ska använda var och en.
YouTube Video
HTML för förhandsgranskning
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>Jämförelse mellan Flexbox, Grid och kolumnlayouter
CSS flex, grid och columns är alla tekniker för justering och layout av element, men var och en har sina styrkor och idealiska användningsområden. Nedan finns en tydlig förklaring av deras skillnader genom jämförelse.
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}Funktioner
- Lämplig för enriktade layouter—antingen horisontella eller vertikala.
- Ger flexibel kontroll över ordning och flexibilitet hos element.
- Bäst lämpad för småskaliga layouter som navigeringsfält och knapplistor.
Fördelar
- Justerar automatiskt storleken på barnelement.
- Du kan ändra ordningen på element genom att använda egenskaper som
flex-direction,flex-wrapochorder.
Exempel på ändring av visningsordning
flex-direction
Som ett exempel på att ändra visningsordningen, låt oss sätta egenskapen flex-direction till column.
1.flex-container {
2 flex-direction: column;
3}När flex-direction är inställt på column ändras objekten från en horisontell layout till en vertikal. Layouten ändras från vänster-till-höger till uppifrån-och-ner.
flex-wrap
Att ange wrap-reverse för egenskapen flex-wrap vänder ordningen på radbrytningarna från det vanliga hållet.
1.flex-container {
2 flex-direction: row;
3 flex-wrap: wrap-reverse;
4}På detta sätt visas linjerna staplade från botten till toppen.
1.flex-container {
2 flex-direction: column;
3 flex-wrap: wrap-reverse;
4}När flex-direction är inställd på column och flex-wrap är inställd på wrap-reverse, ordnas objekten vertikalt medan kolumnerna bryts från höger till vänster. Som i detta exempel är kolumnordningen omvänd från det vanliga vänster-till-höger, och objekt läggs till från höger till vänster.
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}Funktioner
- Idealisk för tvådimensionella layouter.
- Möjliggör tydlig definition av rutnätsbaserade layouter.
- Perfekt för mer komplexa designer och övergripande sidstruktur.
Fördelar
- Rader och kolumner kan definieras samtidigt.
- Sektioner kan placeras med hjälp av namngivna områden (
grid-area). - Barnelement kan placeras fritt inom rutnätet, vilket möjliggör flexibel kontroll över ordningen.
Exempel på ändring av visningsordning
Som ett exempel på att ändra visningsordning, låt oss använda egenskapen grid-template-areas för att ställa in visningspositionerna.
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; }I detta exempel används egenskapen grid-template-areas för att visuellt definiera den övergripande rutnätslayouten och tilldela områdesnamn till varje cell. Sedan, genom att tilldela motsvarande grid-area-namn till varje barnobjekt, placeras de på önskade positioner. Genom att använda grid på detta sätt kan du inte bara fritt ändra visningsordningen för element utan också enkelt skapa komplexa och unika layouter.
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}Funktioner
- Du kan enkelt skapa kolumner i tidskriftsstil.
- Idealisk för flödande textinnehåll.
- Följer HTML-källkodsordningen, vilket gör den mindre lämplig för att kontrollera elementordning.
Fördelar
- Kan automatiskt dela upp lång text.
- Du kan mycket enkelt skapa layouter i tidningsstil.
Jämförelsetabell
| Funktion/Fall | Flexbox | Grid | Kolumner |
|---|---|---|---|
| Layoutdimension | 1D (horisontell eller vertikal) | 2D (horisontell & vertikal) | 1D (vertikal) |
| Bäst För | Komponentjustering | Hel sidstruktur | Flerkolumnig text |
| Layoutflexibilitet | Hög (ordning & storlek) | Mycket hög (områdesdefinition) | Låg (endast automatisk uppdelning) |
| Kontroll av barn | Flexibel | Tydligt definierad | Svår att kontrollera |
| Layoutavsikt | Innehållsdrivet | Layoutdrivet | Textdrivet |
Sammanfattning
- Flexbox är idealisk när du vill justera element i en rad, som rubriker eller kortlistor.
- Grid passar bra när du vill designa hela layouten, som strukturen på en webbsida.
- Kolumner är bäst när du vill formatera text i flera kolumner, exempelvis i artiklar eller bloggar.
Du kan också kombinera dem efter behov. Till exempel kan du designa den övergripande layouten med Grid och justera interna element med Flex.
Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.