Articles
Introduktion til CSS
Sammenligning af Flexbox-, Grid- og Kolonnelayouts

Sammenligning af Flexbox-, Grid- og Kolonnelayouts

Denne artikel forklarer forskellene mellem Flexbox-, Grid- og Kolonnelayouts.

Du vil lære forskellene mellem Flexbox-, Grid- og Kolonnelayouts, og hvornår du skal bruge dem hver især.

YouTube Video

HTML til 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 af Flexbox-, Grid- og Kolonnelayouts

CSS flex, grid og columns er alle teknikker til justering og layout af elementer, men hver af dem har deres egne styrker og ideelle anvendelsesområder. Nedenfor finder du en klar forklaring på deres forskelle via en 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}

Funktioner

  • Egnet til enkeltrækkende layouts — enten horisontale eller vertikale.
  • Giver fleksibel kontrol over elementernes rækkefølge og fleksibilitet.
  • Bedst egnet til små layouts, såsom navigationsbarer og grupper af knapper.

Fordele

  • Tilpasser automatisk størrelsen på underordnede elementer.
  • Du kan ændre rækkefølgen af elementer ved hjælp af egenskaber som flex-direction, flex-wrap og order.

Eksempel på ændring af visningsrækkefølge

Som et eksempel på at ændre visningsrækkefølgen, lad os sætte flex-direction egenskaben til column.

1.flex-container {
2    flex-direction: column;
3}

Når flex-direction er sat til column, ændrer elementerne sig fra en vandret layout til en lodret. Layoutet ændres fra venstre-mod-højre til top-mod-bund.

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

  • Ideel til todimensionale layouts.
  • Muliggør en klar definition af grid-baserede layouts.
  • Fremragende til mere komplekse designs og overordnet sidestruktur.

Fordele

  • Rækker og kolonner kan defineres samtidig.
  • Sektioner kan placeres ved hjælp af navngivne områder (grid-area).
  • Underordnede elementer kan placeres frit inden for nettet, hvilket giver fleksibel kontrol over rækkefølgen.

Eksempel på ændring af visningsrækkefølge

Som et eksempel på at ændre visningsrækkefølgen, lad os bruge egenskaben grid-template-areas til at sætte visningspositionerne.

 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; }

Som du kan se, kan grid bruges ikke kun til at ændre visningsrækkefølgen, men også til at skabe unikke layouts.

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 nemt oprette magasin-stil kolonner.
  • Ideel til flydende tekstindhold.
  • Følger HTML-kildeordren, hvilket gør den mindre velegnet til at styre elementernes rækkefølge.

Fordele

  • Kan automatisk opdele lange tekster.
  • Du kan meget nemt skabe avis-stil layouts.

Sammenligningstabel

Funktion / Brugstilfælde Flexbox Grid Kolonner
Layoutdimension 1D (vandret eller lodret) 2D (vandret & lodret) 1D (lodret)
Bedst til Justering af komponenter Fuld sideopbygning Tekst i flere kolonner
Layoutfleksibilitet Høj (rækkefølge og størrelse) Meget høj (områdedefinition) Lav (kun automatisk opdeling)
Kontrol over børn Fleksibel Klart defineret Svær at kontrollere
Layoutintention Indholdsdrevet Layout-drevet Tekstdrevet

Sammendrag

  • Flexbox er ideel, når du vil justere elementer på en række, såsom overskrifter eller kortlister.
  • Grid er velegnet, når du vil designe hele layoutet, såsom strukturen på en webside.
  • Kolonner er bedst, når du vil formatere tekst i flere kolonner, såsom i artikler eller blogs.

Du kan også kombinere dem efter behov. For eksempel kan du designe den overordnede layout med Grid og justere interne elementer med Flex.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

CSS-egenskaber relateret til kolonnelayout