Elementer på række 1 / 12

Få boksene til at stå på række ved at ændre .container til en flex-container.

Hints
  • display
  • gap
  • flex
Har du brug for hjælp? Lær mere om flex-container
HTML
.box-1
.box-2
.box-3
.box-4
.box-5

Justér elementer 2 / 12

Få boksene til at stå på række, og fordel den overskydende plads i containren jævnt mellem dem med justify-content space-between.

Prøv derefter at ændre værdien til hhv. space-evenly, space-around, center og flex-end og bemærk, hvordan den ledige plads fordeles forskelligt.

Hints
  • justify-content
  • space-between
  • space-evenly
  • center
  • flex-end
Har du brug for hjælp? Lær mere om justify-content
HTML
.box-1
.box-2
.box-3
.box-4
.box-5

Skub med auto-margin 3 / 12

Adskil .logo fra de resterende bokse vha. auto-margin. Brug margin-right eller margin-inline-end med værdien auto for at bruge den overskydende plads i containeren til at skubbe de øvrige bokse mod højre.

Brug align-items center til at centrere boksene på containerens vertikale akse, så højden begrænses til boksenes reelle højde. Tilføj gap, for at garantere en minumumsafstand mellem boksene.

Hints
  • margin-right/margin-inline-end
  • align-items
  • auto
Har du brug for hjælp? Lær mere om auto-margin
HTML
.box-1
.box-2
.box-3
.box-4

Skift retning 4 / 12

Brug den overskydende plads i containeren til at skubbe de to bokse fra hinanden, ændr retningen (column) i containeren, så boksene placeres fra top mod bund vha. flex-direction.

Brug enten auto-margin på én af boksene eller justify-content på containeren for at placere boksene i top og bund.

Hints
  • flex-direction
  • column
Har du brug for hjælp? Lær mere om flex-direction
HTML
.box-1
.box-2

Modsat retning 5 / 12

Brug den overskydende plads i containeren til at skubbe de to bokse fra hinanden, ændr retningen (column-reverse) i containeren, så boksene placeres fra bund mod top vha. flex-direction. Læg mærke til rækkefølgen på boksene.

Brug enten auto-margin på én af boksene eller justify-content på containeren for at placere boksene i top og bund.

Hints
  • flex-direction
  • column-reverse
Har du brug for hjælp? Lær mere om column-reverse
HTML
.box-1
.box-2

Fyld containeren 6 / 12

Brug flex-grow på .box-1 for at få den til at optage den overskydende plads i containeren. Den anden boks bliver således skubbet ned i bunden af containeren. Ændr retningen i containeren, så boksene placeres fra top mod bund.

Træk vinduet større vha. for at se, hvordan .box-1 altid optager den overskydende plads i containeren.

Tilføj derefter flere bokse, for at se, hvordan den overskydende plads i containeren skrumper ind, som forårsager .box-1 til at blive mindre.

Hints
  • flex-grow
Har du brug for hjælp? Lær mere om flex-grow
HTML
.box-1
.box-2

Placér bokse 7 / 12

Brug align-self til at placere .box-1 og .box-3 i containeren. Lad .box-2 optage den resterende plads i containeren, så den skubber de øvrige bokse så små som muligt.

Træk i vinduet vha. for at se, hvordan boksene opfører sig i forskellige størrelser.

Hints
  • flex-grow
  • align-self
  • flex-start
  • flex-end
Har du brug for hjælp? Lær mere om align-self
HTML
.box-1
.box-2
.box-3

Klynge-wrap 8 / 12

Få hvert ord til at rykke ned på en ny række, hvis der ikke er plads nok på den nuværende, ved at sætte flex-wrap til wrap på .containeren.

Tilføj noget afstand mellem ordene ved at sætte gap til .5rem.

Hints
  • flex-wrap
  • wrap
Har du brug for hjælp? Lær mere om flex-wrap
HTML
Layout
CSS
Web Design
Code
Front-end
Development

Fyld rækkerne ud 9 / 12

Få boksene til at rykke ned på en ny række, hvis der ikke er plads nok ved at sætte flex-wrap til wrap på .containeren. Indstil derefter hver boks til minimum at fylde 30 % af containerens bredde vha. flex: 30%;. Dette sørger samtidigt for, at alle boksene udnytter hele den tilgængelige plads i containeren.

flex er en forkortelse for flex-grow, flex-shrink og flex-basis. Mens flex-grow: 1; udnytter ekstra plads i containeren ligeligt, fastsætter flex-basis boksenes ideelle bredde, og flex-shrink: 1; gør det muligt for boksene at skrumpe mindre end deres flex-basis værdi.

Bemærk, flex: 30%; er det samme som at skrive flex-grow: 1;, flex-shrink: 1; og flex-basis: 30%;.

Hints
  • flex-wrap
  • flex
  • wrap
Har du brug for hjælp? Lær mere om flex shorthand
HTML
.box-1
.box-2
.box-3
.box-4
.box-5
.box-6
.box-7
.box-8

Flex none 10 / 12

Lav en flex-container, der wrapper indholdet, når der ikke er plads (inkl. lidt gap).

Brug derefter flex shortands til hhv. at få .box-1 til kun være så bred som dens indhold vha. værdien none, mens .box-2 skal fylde 300px plus containerens eventuelle overskydende plads.

Træk i vinduet vha. for at se, hvordan boksene opfører sig i forskellige størrelser.

Hints
  • flex-wrap
  • flex
  • wrap
  • none
Har du brug for hjælp? Lær mere om flex shorthand
HTML
.box-1
.box-2

Wrap-reverse 11 / 12

Indstil boksene til hhv. at fylde 300px (.box-1) og 100px (.box-2) plus containerens eventuelle overskydende plads vha. flex.

Sæt derefter flex-wrap til wrap-reverse på .containeren for at få boksene til at wrappe i omvendt rækkefølge.

Hints
  • flex
  • flex-wrap
  • wrap-reverse
Har du brug for hjælp? Lær mere om wrap-reverse
HTML
.box-1
.box-2

Scrolling Container 12 / 12

Lav .containeren til en flex-container og sørg for at hver box fylder 65% af containerens bredde ved at indstille flex-basis: 65% på .box. Sørg også for, at alle boksene ikke kan skrumpe ved at sætte flex-shrink til 0.

Tilføj noget afstand mellem boksene ved at sætte gap til .5rem.

Hints
  • flex-shrink
  • flex-basis
Har du brug for hjælp? Lær mere om flex-basis
HTML
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9