← Tilbake

Flexbox: Layout

Flexbox er det kraftigste verktøyet vi har i CSS for å plassere elementer ved siden av hverandre og lage responsive nettsider.

Hva lærer vi her?

Container

Display: Flex

Vi gjør en forelder-boks "magisk" slik at den styrer barna sine.

Responsivitet

Flex Wrap

Lær hvordan bokser automatisk hopper ned på neste linje på mobil.

Plassering

Justering

Sentrer innhold eller lag avstand med gap og justify-content.

💡
Viktig huskeregel: Flexbox jobber alltid med en parent (container) og children (items). De fleste kommandoene skrives på containeren.

Oppgave: Lag en fleksibel layout

  1. Lag en <div> med klassen flex-container.
  2. Lag minst tre <div>-bokser (items) inni denne.
  3. Bruk CSS til å aktivere flex og tillate "wrapping" (linjeskift).
  4. Gi boksene en flex-basis på 250px slik at de bryter når det blir trangt.
Hint: Bruk gap: 16px; på containeren i stedet for margin på barna for å lage jevn avstand.

Startkode (HTML)

<div class="flex-container">
  <div class="item">Boks 1</div>
  <div class="item">Boks 2</div>
  <div class="item">Boks 3</div>
</div>

Startkode (CSS)

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.item {
  flex: 1 1 250px;
  padding: 20px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
}

Ekstra utfordringer

  • Prøv justify-content: center; på containeren for å midtstille boksene.
  • Bruk align-items: center; hvis boksene har ulik høyde.
  • Lag en Hero-seksjon hvor teksten alltid står i midten, både vertikalt og horisontalt.