8 Flexbox

I dette kapitlet lager du nettstedet til Bruktbutikken, som vil vise varene som kort ved siden av hverandre. Da bruker du flexbox. Lagre alt du lager i dette kapitlet i mappen kap08-flexbox.

8.1 Elementer på rad

bruktbutikken/stil.css
header {
  display: flex;
}

Med display: flex bestemmer du selv hvordan elementene inne i en boks skal plasseres. Boksen kalles en flexbeholder, og elementene rett inni kalles flexelementer.

Nettleser
  1. Les koden ovenfor. Hvilke elementer er flexelementer i <header>?
  2. Lag mappen bruktbutikken med index.html og stil.css. Forsiden skal ha en <header> med overskriften Bruktbutikken og lenkelista ovenfor i en <nav>. Legg til regelen. Hva skjer?
  3. Legg til flex-direction: column; i regelen. Hva skjer? Endre deretter til flex-direction: row;.

Bare elementene som ligger rett inne i flexbeholderen, blir flexelementer. Lenkene inne i <nav> blir ikke flexelementer når det er <header> som har display: flex.

  1. Legg til regelen * { outline: 1px solid red; } som du lærte i 6.7. Hvor brede er flexelementene? Fjern regelen igjen.

8.2 Plassere langs raden

bruktbutikken/stil.css
header {
  display: flex;
  justify-content: space-between;
}

Retningen flexelementene legger seg i, kalles hovedretningen. Med justify-content bestemmer du hvordan flexelementene fordeles langs hovedretningen.

Verdi Flexelementene
flex-start legger seg i starten
center legger seg i midten
flex-end legger seg i slutten
space-between fordeles med like stor avstand mellom seg
space-around fordeles med like stor avstand rundt seg 
Nettleser
  1. Les koden ovenfor, og gjett hvor overskriften og menyen havner.
  2. Legg til justify-content: space-between; i regelen for header. Gjør vinduet smalt og bredt.
  3. Prøv alle verdiene i tabellen, én om gangen. Hvilken passer best for toppen av siden?
  4. Legg til flex-direction: column; igjen, og prøv verdiene på nytt. Hvorfor ser det ut som om ingenting skjer? Fjern flex-direction igjen.

I utviklerverktøyene står det et lite merke, flex, ved siden av flexbeholderen i fanen Elements. Klikk på merket for å se flexelementene markert på siden.

8.3 Plassere på tvers

bruktbutikken/stil.css
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Med align-items plasserer du flexelementene på tvers av hovedretningen. Når hovedretningen er vannrett, plasserer align-items elementene loddrett. Standardverdien stretch strekker alle flexelementene til samme høyde.

  1. Les koden ovenfor. Hvorfor ser du kanskje ingen forskjell med en gang?
  2. Legg til align-items: center; og min-height: 8rem; i regelen for header. Hva skjer?
  3. Endre center til flex-start, flex-end og stretch, én om gangen. Bruk outline for å se hvor høye flexelementene blir.
  4. Fjern min-height igjen, men behold align-items: center.

justify-content plasserer langs hovedretningen, og align-items på tvers av den. Bytter du hovedretningen med flex-direction: column, bytter også de to egenskapene retning.

  1. Lag filen midt.html med en <div> som har en kort tekst, høyden 10rem og en kant. Sentrer teksten både vannrett og loddrett med flexbox.

8.4 Avstand med gap

bruktbutikken/stil.css
nav {
  display: flex;
  gap: 1rem;
}

Egenskapen gap lager avstand mellom flexelementene, men ikke foran det første eller etter det siste. Det er derfor ofte enklere enn å gi hvert element marg.

  1. Les koden ovenfor. Hvilke elementer blir flexelementer nå?
  2. Legg til regelen i stil.css. Hva skjer med lenkelista?
  3. Endre gap: 1rem til gap: 3rem. Endre tilbake.
  4. Inspiser <nav>. Hvorfor ligger lenkene fortsatt under hverandre, med kulepunkter? Hvilket element ligger rett inne i <nav>?

Du får svaret i 8.6. Fjern regelen for nav igjen før du går videre.

8.5 Når raden blir for smal

bruktbutikken/stil.css
.varer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.varer article {
  flex: 1 1 12rem;
  padding: 1rem;
  border: 1px solid #b9a3d6;
  border-radius: 8px;
}

Med flex-wrap: wrap får flexelementene gå over på en ny rad når det ikke er plass. Med flex bestemmer du hvor brede de skal være. flex: 1 1 12rem betyr: Begynn med 12rem, og voks og krymp etter plassen.

  1. Les koden ovenfor. Gjett hvordan varene kommer til å se ut i et bredt og i et smalt vindu.
  2. Legg til en <h2> med teksten Nye varer i <main>, og under den en <div class="varer"> med tre <article>-elementer: en jakke, en sykkel og en stol. Hver artikkel skal ha en <h3> med navnet og et avsnitt som beskriver varen.
  3. Legg til reglene. Gjør vinduet bredt og smalt. Når legger varene seg på flere rader?
  4. Fjern flex-wrap: wrap. Gjør vinduet smalt. Hva skjer nå? Legg det tilbake.
  5. Endre flex: 1 1 12rem til flex: 0 0 12rem. Hva er forskjellen?
  6. Hvorfor legger vi artiklene i en egen <div>, i stedet for å gi <main> regelen display: flex?
Spør KI

Forklar hva de tre tallene i flex: 1 1 12rem betyr i CSS. Bruk et eksempel med tre kort på en nettside, og forklar hva som skjer når vinduet blir smalere.

8.6 En meny med flexbox

bruktbutikken/stil.css
nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  color: #6a3d9a;
}

Det er <li>-elementene som skal legge seg på rad. Derfor må <ul> være flexbeholderen. list-style: none fjerner kulepunktene.

  1. Les koden ovenfor. Hvilke elementer er flexelementer?
  2. Legg til reglene i stil.css.
  3. Fjern list-style: none. Hva skjer? Legg det tilbake.
  4. Fjern padding: 0. Hva skjer? Legg det tilbake.
  5. Gjør vinduet veldig smalt. Hva skjer med menyen?

Nedenfor ser du fire regler som skal legge lenkene på rad. Bare én av dem virker.

Kode A
nav a {
  display: flex;
}
Kode B
nav ul {
  display: flex;
}
Kode C
nav {
  display: flex;
}
Kode D
nav ul {
  display: flexbox;
}
  1. Finn regelen som virker. Forklar hvorfor de tre andre ikke legger lenkene på rad.

Menyen er fortsatt en liste i HTML-koden. En skjermleser sier hvor mange lenker menyen har, selv om du ikke ser kulepunktene.

8.7 Kort med flexbox

bruktbutikken/stil.css
.varer article {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
}

.varer .pris {
  margin-top: auto;
}

Et element kan være både flexelement og flexbeholder. Artiklene er flexelementer i .varer, og flexbeholdere for innholdet sitt. margin-top: auto skyver prisen ned til bunnen av kortet.

Nettleser

  1. Les koden ovenfor, og sammenlign med resultatet. Hvorfor står prisene på linje, selv om tekstene er ulikt lange?

  2. Gi hver vare et eget avsnitt med prisen, med klassen pris. Legg til reglene i stil.css.

  3. Fjern margin-top: auto. Hva skjer? Legg det tilbake.

  4. Lag mappen bilder, og legg et bilde øverst i hver artikkel. Bilder som er bredere enn kortet, lærer du å tilpasse i kapittel 9. Gi dem width="200" så lenge.

  5. Butikken har sendt en liste over nye varer som ren tekst. Lag nye-varer.html med samme <header> og stilark som forsiden, og merk opp hver vare som en <article> i en <div class="varer">.

nye-varer.txt
Nye varer denne uka

Regnjakke
Gul regnjakke i str. L. Som ny.
180 kr

Skateboard
Brukt, men med nye hjul og kulelager.
300 kr

Bokhylle
Hvit bokhylle med fire hyller, 180 cm høy.
250 kr

Lampe
Gammel skrivebordslampe i messing.
120 kr
  1. Hvilke deler av teksten ble <h3>, og hvilke fikk klassen pris? Står prisene på linje?

Bruk flexbox når elementene skal stå på én rad eller i én kolonne, for eksempel lenkene i en meny eller innholdet i et kort. Når elementene skal stå i både rader og kolonner, er grid ofte bedre. Grid lærer du i kapittel 9.

Spør KI

Jeg skal lage en rad med kort på en nettside med flexbox. Ikke skriv koden for meg. Still meg spørsmål som hjelper meg å bestemme hvilken boks som skal være flexbeholder, og hvilke egenskaper jeg trenger.

Oppsummering

I dette kapitlet har du plassert elementer med flexbox. Du har lagt overskriften og menyen på rad, fordelt elementene langs og på tvers av hovedretningen, laget en meny av en liste og laget kort som legger seg på flere rader når vinduet er smalt.

Flexbox

bruktbutikken/stil.css
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
Nettleser
Egenskap Står på Hva den gjør
display: flex beholderen legger flexelementene på rad
flex-direction beholderen row gir rad, column gir kolonne
justify-content beholderen plasserer langs hovedretningen
align-items beholderen plasserer på tvers av hovedretningen
gap beholderen lager avstand mellom flexelementene
flex-wrap: wrap beholderen lar flexelementene gå over på flere rader
flex flexelementet bestemmer hvor bredt det er, og om det kan vokse og krympe

Merk deg følgende:

  • Bare elementene som ligger rett inne i beholderen, blir flexelementer.
  • En meny lages av en <ul> med display: flex, list-style: none og uten margin og padding.
  • Et element kan være både flexelement og flexbeholder.

Oppgaver

Oppgave 8.1

stil.css
footer {
  display: flexbox;
  justify-content: middle;
  align-items: centre;
}

Koden ovenfor har tre feil. Finn og rett dem.

Oppgave 8.2

  • display: flex;
  • footer {
  • gap: 2rem;
  • }
  • flex-wrap: wrap;

Lag mappen oppg2-bunntekst med en side og et stilark. Sett sammen kodelinjene til en regel for en bunntekst med tre avsnitt ved siden av hverandre: adresse, åpningstider og telefon.

Oppgave 8.3

Nettleser

Lag boksen ovenfor med flexbox, i filen oppg3-melding.html.

Oppgave 8.4

En <div> har tre små bokser inni seg, og regelen display: flex. Tegn hvordan boksene ser ut med justify-content: flex-end, space-between og space-around. Sjekk svaret ditt i nettleseren.

Oppgave 8.5

Forklar forskjellen på justify-content og align-items. Hva skjer med forskjellen når du bruker flex-direction: column?

B-oppgaver

Oppgave 8.6

Kopier mappen klubb fra kapittel 7 over til mappen kap08-flexbox. Gi nettstedet en meny med flexbox, og en rad med kort for for eksempel lagene, trenerne eller arrangementene. Kortene skal legge seg på flere rader når vinduet er smalt.

Oppgave 8.7

Lag mappen oppg7-bilde-og-tekst med et kort som har et bilde til venstre og en tekst til høyre. Når vinduet er smalt, skal teksten legge seg under bildet. Bruk flex-wrap og flex.

Oppgave 8.8

Spill spillet Flexbox Froggy på nettet. Skriv ned tre egenskaper eller verdier du lærte i spillet som ikke står i dette kapitlet, og forklar hva de gjør.

Oppgave 8.9

Undersøk egenskapene order og align-self. Lag mappen oppg9-rekkefolge med en meny der lenken til kontaktsiden alltid står til høyre, med margin-left: auto. Lag deretter en rad med kort der det første kortet i koden vises sist på siden. Forklar hvorfor det kan være et problem for en som bruker eller skjermleser, når rekkefølgen på skjermen er en annen enn i koden.