Flex brukes til å plassere elementer langs én akse – enten horisontalt eller vertikalt. Bruk Flex der du trenger enkel rad- eller kolonnebasert plassering, justering og mellomrom.
Trenger du toaksekontroll med rader og kolonner, bruk Grid i stedet.
Retning
Propen direction styrer om elementene plasseres horisontalt (row, standard) eller vertikalt (column).
Propen gap setter avstand mellom alle elementer med designsystemets spacing-skala (f.eks. "s", "m", "l"). Bruk rowGap og columnGap for å sette ulik avstand i hver retning.
Flex.Spacer
Bruk Flex.Spacer til å skyve naboelementene fra hverandre. Spaceren tar opp all ledig plass langs hovedaksen og er nyttig for å plassere et element helt til høyre eller bunnen.
De fleste propser støtter responsive objekter med brekkpunktene base (mobil), s (600px), m (800px), lg (1200px) og xl (1400px). Dette gjør det mulig å endre retning og justering basert på skjermstørrelse.
Universell utforming
Flex er et rent layoutelement uten semantisk betydning. Sørg for at innholdet inni har riktig semantisk struktur med korrekte HTML-elementer og ARIA-attributter der det trengs. Flex.Spacer rendres med role="presentation" og aria-hidden="true" og er usynlig for skjermlesere.
