Flexbox – å lage en layout for nettsiden

Mål

• Sette opp en fleksibel side-layout med display: flex.
• Bruke flex-wrap: wrap slik at bokser flyter responsivt.
• Forstå forholdet mellom container og items i Flexbox.

Oppgave

1. Lag en <div> med klassen flex-container.
2. Lag minst tre <div>-bokser inni containeren (flere rader/kolonner er lov).
3. Gjør containeren til en flex-container med display: flex og flex-wrap: wrap.
4. Gi boksene fast minimumsbredde (f.eks. 250px) og litt margin/padding, så de bryter pent.

Startkode (HTML)

<div class="flex-container">
  <div class="item">Boks 1</div>
  <div class="item">Boks 2</div>
  <div class="item">Boks 3</div>
  <!-- Legg gjerne til flere -->
</div>

Startkode (CSS)

.flex-container {
  display: flex;        /* Aktiverer flex */
  flex-wrap: wrap;      /* Lar elementer bryte til neste rad */
  gap: 16px;            /* Avstand mellom boksene */
}

.flex-container .item {
  flex: 1 1 250px;      /* vokser, krymper, min-bredde */
  padding: 16px;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  background: #f8f9fa;
}

Tips: Test ulike verdier på flex (f.eks. 0 1 300px eller 2 1 240px) for å se hvordan layouten endrer seg.

Ekstra utfordring

• Lag en toppmeny som er en egen flex-rad (logo + navigasjon).
• Lag en hovedseksjon som består av innhold + sidebar som bryter til én kolonne på mobil.
• Bruk justify-content og align-items for å plassere elementene.