Flex v4.7.2

Retningslinjer

Flex-komponenten er en wrapper rundt et HTML-element (som div, section, etc.) som gjør det enklere å implementere fleksibel og responsiv layout ved hjelp av props i stedet for manuell CSS. Den oversetter props til klasser som er definert i et tilhørende Flex stilark (f.eks. med utility-classes som jkl-flex, row-gap-md, align-center, osv.).

• Props styrer layouten via klassenavn: De fleste props (som gap, align, justify, direction, osv.) oversettes direkte til CSS-klasser.
• Vi anbefaler disse CSS flex guidene og spillene:
  CSS-Tricks
  Mozilla Flexbox dokumentasjon
  Flex box Froggy

Oppførsel

Flex gir deg enkel tilgang til display: flex og forhåndsdefinerte innstillinger for layout og plassering av elementer både vertikalt og horisontalt. Du kan spesifisere ulike layoutinnstillinger for forskjellige skjermstørrelser. Den tilbyr også muligheter for fordeling av plass mellom elementer, konsistent sentrering på tvers av sider og kraftige justeringsmuligheter. Propsene er samme som dem du kjenner fra CSS sin flex-spesifikasjon.

Tilgjengelighet

Semantikk

• Flex-komponenten rendres som et HTML-element, vanligvis en <div> hvis ikke annet er spesifisert.
• <div> har ingen semantikk, så hvis du bruker Flex til å gruppere navigasjon, seksjoner, artikler eller lister, bør du bruke riktig HTML-element via as-prop’en. Dette sikrer at hjelpemidler som skjermlesere forstår strukturen på siden.

<Flex as="nav" aria-label="Hovedmeny"> ... </Flex>

Rekkefølge i DOM

Tastaturnavigasjon

Flex kan endre visuell rekkefølge på elementer via flex-direction, men skjermlesere følger fortsatt DOM-rekkefølgen.

Unngå å bruke Flex til å "flytte" innhold visuelt på en måte som forvirrer brukere som navigerer med tastatur eller skjermleser. Sørg for at DOM-rekkefølgen gir mening og matcher den visuelle opplevelsen.

Responsivt design

Når du endrer layout for ulike skjermstørrelser, test med skjermleser og tastaturnavigasjon – ikke bare visuelt.