Gå til hovedinnhold

Layout & Flater

Flex

Beta
@entur/layout/betav5.1.1

Flex er en layoutkomponent for CSS Flexbox. Den gir kontroll over retning, justering og mellomrom langs én akse, med støtte for responsive verdier.

Flex-props

Bruk Flex når

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.

Unngå Flex når

du trenger toaksekontroll med rader og kolonner, bruk Grid i stedet

Retningslinjer

Retning

Propen direction styrer om elementene plasseres horisontalt (row, standard) eller vertikalt (column).

Justering

Bruk align for å justere elementer langs kryssaksen (vertikalt i en rad), og justify for å justere langs hovedaksen (horisontalt i en rad).

Mellomrom

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.

Responsivt oppsett

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.

Eksempler

Horisontal og vertikal retning

Justering med align og justify

Flex.Spacer