Flex
Flex er den primære layout-primitiven i Jøkul. Den lar deg bygge flexbox-layouts med Jøkuls spacing-skala for gap, uten å skrive CSS. Komponenten rendres som div som standard, men kan rendres som et hvilket som helst HTML-element via as-proppen.
Viktig informasjon
Flex er ikke ment å erstatte alle layout-behov. For todimensjonale layouts, bruk CSS Grid.
Props
Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
childrenReact | React.ReactNode | Ja | — | Innholdet som skal layoutes. |
directionReact | "row" | "column" | "row-reverse" | "column-reverse" | Nei | "row" | Retningen barn-elementene plasseres. |
gapEgendefinert | "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | Nei | "none" | Avstand mellom barn-elementene. Bruker Jøkuls spacing-skala. |
wrapEgendefinert | "nowrap" | "wrap" | "wrap-reverse" | Nei | "nowrap" | wrap lar barn-elementene bryte over på ny linje. |
alignItemsEgendefinert | "normal" | "start" | "center" | "end" | "baseline" | "stretch" | Nei | "stretch" | Justering langs kryssaksen. |
justifyContentEgendefinert | string | Nei | "flex-start" | Distribusjon langs hovedaksen. |
asEgendefinert | React.ElementType | Nei | "div" | HTML-elementtypen som rendres. |
Eksempler
Semantisk element
Bruk as for å unngå overflødige wrapper-elementer.
Fordeling med space-between
justifyContent="space-between" for topp-/bunntekst-mønster.
Venstre innhold