Gå til innhold

Flexbox

Flexbox er en måte å plassere elementer på en nettside. Det gjør det enkelt å lage layouts der ting står ved siden av hverandre eller under hverandre.

Hvorfor Flexbox?

Før Flexbox var det vanskelig å:

  • Plassere ting ved siden av hverandre
  • Sentrere elementer
  • Fordele plass jevnt mellom elementer

Med Flexbox blir alt dette enkelt!

Grunnleggende konsept

Flexbox handler om to ting:

  1. Container (flex container) - foreldreelementet som holder på barna
  2. Items (flex items) - barna som skal plasseres
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.container {
    display: flex;
}

Når du skriver display: flex på et element, blir alle barna automatisk plassert ved siden av hverandre!

Akser

Flexbox har to akser:

Hovedakse (main axis) →
┌─────────────────────────────────┐
│  ┌───┐  ┌───┐  ┌───┐           │  ↑
│  │ 1 │  │ 2 │  │ 3 │           │  │ Kryssakse
│  └───┘  └───┘  └───┘           │  │ (cross axis)
└─────────────────────────────────┘  ↓
  • Hovedakse: Retningen elementene plasseres i (standard: vannrett →)
  • Kryssakse: Den andre retningen (standard: loddrett ↓)

flex-direction

Bestemmer retningen på hovedaksen.

.container {
    display: flex;
    flex-direction: row;
}

┌───┐ ┌───┐ ┌───┐
│ 1 │ │ 2 │ │ 3 │  → Vannrett
└───┘ └───┘ └───┘

.container {
    display: flex;
    flex-direction: row-reverse;
}

┌───┐ ┌───┐ ┌───┐
│ 3 │ │ 2 │ │ 1 │  ← Baklengs vannrett
└───┘ └───┘ └───┘

.container {
    display: flex;
    flex-direction: column;
}

┌───┐
│ 1 │
└───┘
┌───┐
│ 2 │  ↓ Loddrett
└───┘
┌───┐
│ 3 │
└───┘

.container {
    display: flex;
    flex-direction: column-reverse;
}

┌───┐
│ 3 │
└───┘
┌───┐
│ 2 │  ↑ Baklengs loddrett
└───┘
┌───┐
│ 1 │
└───┘

justify-content

Bestemmer hvordan elementene plasseres langs hovedaksen.

Elementer samles i starten.

.container {
    display: flex;
    justify-content: flex-start;
}

┌─────────────────────────────────┐
│ ┌───┐┌───┐┌───┐                 │
│ │ 1 ││ 2 ││ 3 │                 │
│ └───┘└───┘└───┘                 │
└─────────────────────────────────┘

Elementer samles i slutten.

.container {
    display: flex;
    justify-content: flex-end;
}

┌─────────────────────────────────┐
│                 ┌───┐┌───┐┌───┐ │
│                 │ 1 ││ 2 ││ 3 │ │
│                 └───┘└───┘└───┘ │
└─────────────────────────────────┘

Elementer sentreres.

.container {
    display: flex;
    justify-content: center;
}

┌─────────────────────────────────┐
│        ┌───┐┌───┐┌───┐          │
│        │ 1 ││ 2 ││ 3 │          │
│        └───┘└───┘└───┘          │
└─────────────────────────────────┘

Lik avstand mellom elementer, ingen plass på kantene.

.container {
    display: flex;
    justify-content: space-between;
}

┌─────────────────────────────────┐
│ ┌───┐       ┌───┐       ┌───┐   │
│ │ 1 │       │ 2 │       │ 3 │   │
│ └───┘       └───┘       └───┘   │
└─────────────────────────────────┘

Lik avstand rundt hvert element.

.container {
    display: flex;
    justify-content: space-around;
}

┌─────────────────────────────────┐
│   ┌───┐     ┌───┐     ┌───┐    │
│   │ 1 │     │ 2 │     │ 3 │    │
│   └───┘     └───┘     └───┘    │
└─────────────────────────────────┘

Helt lik avstand overalt.

.container {
    display: flex;
    justify-content: space-evenly;
}

┌─────────────────────────────────┐
│    ┌───┐    ┌───┐    ┌───┐      │
│    │ 1 │    │ 2 │    │ 3 │      │
│    └───┘    └───┘    └───┘      │
└─────────────────────────────────┘

align-items

Bestemmer hvordan elementene plasseres langs kryssaksen.

Elementer strekkes til full høyde.

.container {
    display: flex;
    align-items: stretch;
    height: 200px;
}

┌─────────────────────────────────┐
│ ┌───┐┌───┐┌───┐                 │
│ │   ││   ││   │                 │
│ │ 1 ││ 2 ││ 3 │                 │
│ │   ││   ││   │                 │
│ └───┘└───┘└───┘                 │
└─────────────────────────────────┘

Elementer øverst.

.container {
    display: flex;
    align-items: flex-start;
    height: 200px;
}

┌─────────────────────────────────┐
│ ┌───┐┌───┐┌───┐                 │
│ │ 1 ││ 2 ││ 3 │                 │
│ └───┘└───┘└───┘                 │
│                                 │
│                                 │
└─────────────────────────────────┘

Elementer nederst.

.container {
    display: flex;
    align-items: flex-end;
    height: 200px;
}

┌─────────────────────────────────┐
│                                 │
│                                 │
│ ┌───┐┌───┐┌───┐                 │
│ │ 1 ││ 2 ││ 3 │                 │
│ └───┘└───┘└───┘                 │
└─────────────────────────────────┘

Elementer sentrert vertikalt.

.container {
    display: flex;
    align-items: center;
    height: 200px;
}

┌─────────────────────────────────┐
│                                 │
│ ┌───┐┌───┐┌───┐                 │
│ │ 1 ││ 2 ││ 3 │                 │
│ └───┘└───┘└───┘                 │
│                                 │
└─────────────────────────────────┘

Sentrere perfekt

For å sentrere noe både vannrett og loddrett:

.container {
    display: flex;
    justify-content: center;  /* vannrett */
    align-items: center;      /* loddrett */
    height: 100vh;            /* full skjermhøyde */
}

┌─────────────────────────────────┐
│                                 │
│                                 │
│           ┌───────┐             │
│           │ Hei!  │             │
│           └───────┘             │
│                                 │
│                                 │
└─────────────────────────────────┘

Superenkel sentrering

justify-content: center + align-items: center er den enkleste måten å sentrere noe på en nettside!

gap

Legger til mellomrom mellom elementene.

.container {
    display: flex;
    gap: 20px;
}

┌───┐     ┌───┐     ┌───┐
│ 1 │ 20px│ 2 │ 20px│ 3 │
└───┘     └───┘     └───┘

Du kan også ha forskjellig avstand vannrett og loddrett:

.container {
    display: flex;
    gap: 10px 20px;  /* rad-gap kolonne-gap */
}

flex-wrap

Som standard prøver Flexbox å presse alle elementer på én linje. Med flex-wrap kan de brytes til flere linjer.

.container {
    display: flex;
    flex-wrap: nowrap;
}

Alle elementer på én linje (kan bli veldig smale).

.container {
    display: flex;
    flex-wrap: wrap;
}

┌─────────────────────────────────┐
│ ┌───┐ ┌───┐ ┌───┐ ┌───┐         │
│ │ 1 │ │ 2 │ │ 3 │ │ 4 │         │
│ └───┘ └───┘ └───┘ └───┘         │
│ ┌───┐ ┌───┐                     │
│ │ 5 │ │ 6 │  ← Brytes til ny rad│
│ └───┘ └───┘                     │
└─────────────────────────────────┘

Egenskaper på flex items

Disse egenskapene brukes på barna (items), ikke containeren.

flex-grow

Bestemmer hvor mye et element skal vokse i forhold til andre.

.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; }  /* Dobbelt så bred */
.item-3 { flex-grow: 1; }

┌─────────────────────────────────┐
│ ┌─────┐ ┌───────────┐ ┌─────┐   │
│ │  1  │ │     2     │ │  3  │   │
│ │ 1x  │ │    2x     │ │ 1x  │   │
│ └─────┘ └───────────┘ └─────┘   │
└─────────────────────────────────┘

flex-shrink

Bestemmer hvor mye et element skal krympe når det ikke er nok plass.

.item {
    flex-shrink: 0;  /* Ikke krymp */
}

flex-basis

Startbredden til et element før det vokser eller krymper.

.item {
    flex-basis: 200px;
}

Shorthand: flex

Kombinerer grow, shrink og basis:

.item {
    flex: 1;           /* flex-grow: 1 */
    flex: 1 0 200px;   /* grow shrink basis */
}

Lik bredde

flex: 1 på alle items gir dem lik bredde!

align-self

Overstyr align-items for ett enkelt element.

.container {
    display: flex;
    align-items: flex-start;
}

.special {
    align-self: flex-end;  /* Bare denne nederst */
}

┌─────────────────────────────────┐
│ ┌───┐┌───┐                      │
│ │ 1 ││ 2 │                      │
│ └───┘└───┘                      │
│                          ┌───┐  │
│                          │ 3 │  │ ← align-self: flex-end
│                          └───┘  │
└─────────────────────────────────┘

Praktiske eksempler

<nav class="navbar">
    <div class="logo">MinSide</div>
    <ul class="nav-links">
        <li><a href="#">Hjem</a></li>
        <li><a href="#">Om</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
</nav>

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #333;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

Kortgalleri

<div class="gallery">
    <div class="card">Kort 1</div>
    <div class="card">Kort 2</div>
    <div class="card">Kort 3</div>
    <div class="card">Kort 4</div>
</div>

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 250px;  /* Minst 250px, vokser ellers */
    padding: 20px;
    background: #f0f0f0;
}

<footer class="footer">
    <div class="col">
        <h3>Om oss</h3>
        <p>Info...</p>
    </div>
    <div class="col">
        <h3>Lenker</h3>
        <p>Lenker...</p>
    </div>
    <div class="col">
        <h3>Kontakt</h3>
        <p>Kontakt...</p>
    </div>
</footer>

.footer {
    display: flex;
    justify-content: space-around;
    padding: 2rem;
    background: #333;
    color: white;
}

.col {
    flex: 1;
    max-width: 300px;
}

Oppsummering

Egenskap Brukes på Hva den gjør
display: flex Container Aktiverer Flexbox
flex-direction Container Retning (row/column)
justify-content Container Plassering langs hovedakse
align-items Container Plassering langs kryssakse
gap Container Mellomrom mellom items
flex-wrap Container Tillat linjeskift
flex-grow Item Hvor mye den skal vokse
flex-shrink Item Hvor mye den skal krympe
flex-basis Item Startbredde
align-self Item Overstyr align-items

Lær mer

Prøv Flexbox Froggy - et morsomt spill for å lære Flexbox!

Se også Responsivt design for hvordan du kombinerer Flexbox med media queries for å lage layouts som tilpasser seg ulike skjermstørrelser.