Flex Playground

Utforsk hvordan individuelle flex-egenskaper påvirker et sett med elementer. Ved å justere verdiene kan du se hvordan de samme prinsippene fra hovedsiden virker i praksis på en enkel komponent.

🗝️ Tips for eksperimentering

Test ulike kombinasjoner av justify-content og align-items.
Endre rekkefølgen til boksene med order og se hvordan layouten omorganiseres.
Prøv align-self for kun én boks for å se forskjellen fra align-items.

Visualisering

flex-direction

justify-content

align-items

align-self (for boks #2)

order (for boks #2)

1

2

3