Flexbox: en ekte menu

Jeg viser deg: bokse side om side

Linkene i din menu sidder akkurat nå på siden én etter én, lidt som ord i en setning. En ekte menu har sine punkter pænt stillet op side om side med mellomrum. CSS har et verktøy til at stille bokse op, der heter flexbox:

nav {
  display: flex;    /* this box's children line up side by side */
  gap: 16px;        /* space between them */
}

Det er det. display: flex forteller boksen: “Stil dine børn (linkene her) op i en række.” Og gap setter afstanden mellom dem. Flexbox kan meget mere:

nav {
  display: flex;
  gap: 16px;
  justify-content: center;   /* center children horizontally */
  align-items: center;       /* also align them to the middle vertically */
  flex-wrap: wrap;           /* if they don't fit, wrap to the next line */
}

Jeg viser deg: en menu som en ekte nettside har

La oss kombinere alt, hva du allerede kan, med flexbox:

header {
  background-color: #1d4ed8;   /* a colored bar at the top */
  padding: 16px;
}

header h1 {
  color: white;
  margin: 0;                   /* heading without its default spacing */
}

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;       /* remove the underline from links */
  padding: 8px 14px;
  border-radius: 999px;        /* fully rounded ends = a pill shape */
  background-color: rgba(255, 255, 255, 0.15);  /* semi-transparent white */
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

Noe nyt til sidst: :hover betyder “når du holder musen over det”. Menupunktet lyser op, når du holder musen over det – nøyaktig som på nettsider, du kender.

Nå er det din tur 💪

Gjør din menu til en ekte menu: en farget bjælke over hele bredden af headeren, punkter side om side som piller, der lyser op, når du holder musen over dem. Tag farger fra din palet fra leksjon 6.

header {
  background-color: #1d4ed8;
  padding: 16px;
}

header h1 { color: white; margin: 0; }

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
}

nav a:hover { background-color: rgba(255, 255, 255, 0.35); }

header {
  background-color: #ea580c;
  padding: 16px;
}

header {
  background-color: #15803d;
  padding: 16px;
}

header {
  background-color: #b91c1c;
  padding: 16px;
}

Dette tar du med deg fra leksjonen

• display: flex stiller en boks’ børn op i en række, gap setter mellomrum mellom dem.
• justify-content og align-items justerer placeringen, flex-wrap: wrap lader dem bryde om.
• :hover = “når musen er over det”. En lille oplysning får en nettside til at føles levende.

© 2026 Ing. Martin Polak / AlgoRhino · Vilkår for innholdsbruk