Modul 4 · Kapitel 4.1

Flexbox för rader, menyer och kort

Placera element längs en huvudaxel: i rad eller kolumn.

Mål

Efter kapitlet ska du kunna...

förklara när flexbox passar
använda display: flex, gap och flex-wrap
förstå huvudaxeln och tväraxeln
bygga en meny eller kortlista

När passar flexbox?

En grupp längs en riktning

Länkar i en meny
Knappar i en verktygsrad
Kort i en lista
Element i en kolumn

Börja med frågan: ska elementen ligga i rad eller kolumn?

Starta flexbox

display: flex

.menu {
  display: flex;
  gap: 1rem;
}

Container och items

Föräldern styr barnen

<nav class="menu">
  <a href="index.html">Start</a>
  <a href="kontakt.html">Kontakt</a>
</nav>

nav.menu är flex-container.
Länkarna blir flex-items.

gap

Ändra avståndet mellan items

.menu {
  display: flex;
  gap: 1rem;
}

gap: 1remgap: 1rem;

123

gap skapar mellanrum utan separata marginaler.

flex-direction

Rad eller kolumn

`row`	`column`
Huvudaxeln går horisontellt.	Huvudaxeln går vertikalt.
Items ligger sida vid sida.	Items ligger under varandra.

Interaktiv flex-direction

Bestäm huvudaxeln

flex-directionflex-direction: row;

Byt riktning och se hur huvudaxeln ändras.

123

justify-content

Placering längs huvudaxeln

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

123

Interaktiv justify-content

Flytta längs huvudaxeln

justify-contentjustify-content: flex-start;

123

align-items

Placering längs tväraxeln

.cards {
  display: flex;
  align-items: stretch;
}

stretch är standard och kan göra items lika höga längs tväraxeln.

Interaktiv align-items

Flytta längs tväraxeln

align-itemsalign-items: stretch;

123

flex-wrap

Bryt till en ny rad

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Rutans bredd: 36rem

Kort 1Kort 2Kort 3Kort 4

flex-förkortning

Tre värden i en regel

.card {
  flex: 1 1 16rem;
}

grow
tar ledigt utrymmeshrink
tillåter krympningbasis
anger startstorlek

growshrinkbasis: 8remrutans bredd: 36remflex: 1 1 8rem;

123

Interaktiv flexbox

Ändra alla viktiga värden

flex-direction

justify-content

align-items

gap: 1rem

flex-wrap: wrap

flex-basis: 7rem

flex-shrink

Antal: 3

Höjd: 13rem

flex-grow: 1

Meny

Ett vanligt användningsområde

.menu {
  display: flex;
  gap: 1rem;
  align-items: center;
}

Länkarna ligger i rad och får jämnt avstånd.

Kortlista

Flexibel och radbrytande

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card { flex: 1 1 16rem; }

Kontrollfråga

Vilken axel styr justify-content?

Huvudaxeln eller tväraxeln?

Svar: huvudaxeln. Dess riktning bestäms av flex-direction.

Prova själv

Bygg två flexlayouter

Skapa en meny med fyra länkar.
Gör menyn till flex-container.
Lägg till gap och testa justify-content.
Skapa tre kort.
Tillåt ny rad med flex-wrap.

Sammanfattning

Kom ihåg

display: flex gör barnen till flex-items.
Flex-direction bestämmer huvudaxeln.
Justify-content arbetar längs huvudaxeln.
Align-items arbetar längs tväraxeln.
Gap skapar avstånd och wrap tillåter nya rader.