Articles
Introduksjon til CSS
Sammenligning av Flexbox, Grid og Kolonneoppsett

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-wrap og order.

Eksempel på endring av visningsrekkefølge

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.

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

Som du kan se, kan grid brukes ikke bare til å endre visningsrekkefølgen, men også til å lage unike oppsett.

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.

YouTube Video

CSS-egenskaper relatert til kolonnelayout