Sammenligning av Flexbox, Grid og Kolonneoppsett
Denne artikkelen forklarer sammenligningen mellom Flexbox, Grid og Kolonneoppsett.
Du vil lære forskjellene mellom Flexbox, Grid og Kolonneoppsett, og når du bør bruke hver av dem.
YouTube Video
HTML for Forhåndsvisning
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>Sammenligning av Flexbox, Grid og Kolonneoppsett
CSS flex, grid og columns er alle teknikker for justering og oppsett av elementer, men hver har sine egne styrker og ideelle bruksområder. Nedenfor er en tydelig forklaring av forskjellene gjennom sammenligning.
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}Funksjoner
- Egnet for enveisoppsett – enten horisontalt eller vertikalt.
- Gir fleksibel kontroll over rekkefølge og fleksibilitet for elementer.
- Best egnet for småskalaoppsett som navigasjonsfelt og grupper av knapper.
Fordeler
- Justerer automatisk størrelsen på barneelementer.
- Du kan endre rekkefølgen på elementer ved å bruke egenskaper som
flex-direction,flex-wrapogorder.
Eksempel på endring av visningsrekkefølge
flex-direction
Som et eksempel på å endre visningsrekkefølgen, la oss sette flex-direction-egenskapen til column.
1.flex-container {
2 flex-direction: column;
3}Når flex-direction er satt til column, endrer elementene seg fra en horisontal oppsett til en vertikal. Oppsettet endres fra venstre-til-høyre til topp-til-bunn.
flex-wrap
Ved å sette wrap-reverse for flex-wrap-egenskapen reverserer du rekkefølgen på linjene som brytes fra den vanlige retningen.
1.flex-container {
2 flex-direction: row;
3 flex-wrap: wrap-reverse;
4}På denne måten vises linjene ved å stables fra bunnen til toppen.
1.flex-container {
2 flex-direction: column;
3 flex-wrap: wrap-reverse;
4}Når flex-direction er satt til column og flex-wrap er satt til wrap-reverse, ordnes elementene vertikalt mens kolonnene brytes fra høyre til venstre. Som i dette eksempelet er kolonnerekkefølgen reversert fra den vanlige venstre-til-høyre-retningen, og elementer legges til fra høyre til venstre.
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}Funksjoner
- Ideell for todimensjonale oppsett.
- Gir mulighet for klar definisjon av rutenettbaserte oppsett.
- Flott for mer komplekse design og generell sidestruktur.
Fordeler
- Rader og kolonner kan defineres samtidig.
- Seksjoner kan plasseres ved å bruke navngitte områder (
grid-area). - Barnelementer kan plasseres fritt innenfor rutenettet, noe som gir fleksibel kontroll over rekkefølgen.
Eksempel på endring av visningsrekkefølge
Som et eksempel på å endre visningsrekkefølgen, la oss bruke grid-template-areas-egenskapen til å angi visningsposisjonene.
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 dette eksempelet brukes grid-template-areas-egenskapen for å visuelt definere den overordnede rutenettlayouten og tildele områdenavn til hver celle. Deretter, ved å tildele det tilsvarende grid-area-navnet til hvert barnelement, plasseres de på ønskede posisjoner. Ved å bruke grid på denne måten kan du ikke bare fritt endre visningsrekkefølgen på elementer, men også enkelt lage komplekse og unike 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}Funksjoner
- Du kan enkelt lage magasinlignende kolonner.
- Ideell for flytende tekstinnhold.
- Følger rekkefølgen i HTML-kilden, noe som gjør den mindre egnet for å kontrollere elementrekkefølge.
Fordeler
- Kan automatisk dele opp lang tekst.
- Du kan veldig enkelt lage avisoppsett.
Sammenligningstabell
| Funksjon / Bruksområde | Flexbox | Grid | Kolonner |
|---|---|---|---|
| Oppsett Dimensjon | 1D (horisontal eller vertikal) | 2D (horisontal & vertikal) | 1D (vertikal) |
| Best for | Komponentjustering | Hel sideoppsett | Flerspalte tekst |
| Oppsett Fleksibilitet | Høy (rekkefølge & størrelse) | Svært høy (område-definisjon) | Lav (kun auto-deling) |
| Kontroll over Underordnede | Fleksibel | Tydelig definert | Vanskelig å kontrollere |
| Oppsett Intensjon | Innholdsbasert | Oppsettsbasert | Tekstbasert |
Sammendrag
- Flexbox er ideell når du vil justere elementer på en linje, som overskrifter eller kortlister.
- Grid er egnet når du vil designe hele oppsettet, som strukturen på en nettside.
- Kolonner er best når du vil formatere tekst i flere spalter, som i artikler eller blogger.
Du kan også kombinere dem etter behov. For eksempel kan du designe det overordnede oppsettet med Grid og justere interne elementer med Flex.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.