<lm-flex> – Fleksrad / Flex

Om komponenten

Kanonisk navn: <lm-flex>
Synonymer: flexbox, fleksrad, fleksboks, flex row, flex column, stack
Kategori: layout
ARIA-mønster: Ikke aktuelt - Layout-primitiv uten widgetsemantikk eller brukerinteraksjon.
Parts: container
Native-first-vurdering: Komponenten er en deklarativ wrapper rundt native CSS Flexbox. Attributtene samler vanlige layoutvalg, men all oppførsel kommer fortsatt fra nettleserens flex-motor.
Nettleserstøtte: Bruker CSS Box Alignment-nøkkelordene start/end for align-items på en flex-kontainer - støttet i alle moderne evergreen-nettlesere (Chrome, Firefox, Safari). Ingen bleeding-edge-API-er utover dette.
Sist endret: 20. september 2026
Brukt: 5 steder

Formål

Generisk layout-primitiv for enkle rader og kolonner med CSS Flexbox. Komponenten vet ingenting om innholdet; den styrer bare retning, wrapping, justering og mellomrom.

Egner seg for

Enkle knapperader, verktøylinjer og andre éndimensjonale layouter der <lm-grid> er unødvendig.
Layout der retning, justering, wrapping og mellomrom er nok, uten å skrive de samme flex-reglene på nytt.

Egner seg ikke for

Flere kolonner eller rader av likeverdige elementer; bruk <lm-grid> i stedet.
Layout som trenger individuell styring av flex-grow, flex-shrink eller order per barn, eller avhengigheter mellom flere akser.

Bruk

<script type="module" src="/designsystem/komponenter/layout/flex/flex.js"></script>

<!-- Enkel knapperad -->
<lm-flex gap="0.5em">
    <button type="submit">Lagre</button>
    <button type="button">Avbryt</button>
</lm-flex>

<!-- Kolonne med luft mellom, sentrert langs tverraksen -->
<lm-flex direction="column" align="center" gap="1em">
    <h2>Tittel</h2>
    <p>Innhold</p>
</lm-flex>

<!-- Rad som bryter til flere linjer når det trengs -->
<lm-flex wrap justify="space-between">
    <lm-tag>Ett</lm-tag>
    <lm-tag>To</lm-tag>
    <lm-tag>Tre</lm-tag>
</lm-flex>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`direction`	`"row" \| "column" \| "row-reverse" \| "column-reverse"`	"row"	Attributt/property. Settes rett igjennom til `flex-direction`.
`wrap`	`boolean`	false	Attributt/property. Tilstede = `flex-wrap: wrap`; fravær = `nowrap`.
`align`	`"stretch" \| "start" \| "center" \| "end" \| "baseline"`	"stretch"	Attributt/property. Settes rett igjennom til `align-items`.
`justify`	`"flex-start" \| "start" \| "center" \| "end" \| "space-between" \| "space-around" \| "space-evenly"`	"flex-start"	Attributt/property. Settes rett igjennom til `justify-content`.
`gap`	`string (CSS-lengde)`	"1ch"	Attributt/property. Settes rett igjennom til `gap`.

Slots

Slot	Beskrivelse
(standard)	Vilkårlig markup - hvert direkte barn blir ett flex-element.

Parts

Part	Beskrivelse
`container`	Indre flex-beholder.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-flex::part(container) {
    /* egne stiler for "Indre flex-beholder." */
}

Tilgjengelighet

Komponenten setter ingen ARIA-roller eller aria-*-attributter; den er bare layout rundt slottede barn. Tastaturlogikk finnes ikke. display: contents på slot lar barna bli de faktiske flex-elementene, uten å endre leserekkefølgen i skjermlesere. Komponenten animerer ikke.

Komponenten setter ingen ARIA-roller eller aria-*-attributter; den er bare layout rundt slottede barn.
Den har ingen egen tastaturlogikk.
display: contents på slot lar barna bli de faktiske flex-elementene, uten å endre leserekkefølgen i skjermlesere.
Komponenten har ingen egen animasjon eller høy-kontrastlogikk.

Detaljer

Attributtene sendes rett til de tilsvarende flex-egenskapene uten ekstra oversettelse.
<slot> bruker display: contents, så lys-DOM-barna blir de faktiske flex-elementene.
Komponenten har ingen egen kollapslogikk; wrap løser behovet nativt uten ekstra kode.

Referanser

Se også:

../grid/index.html - nærstående layout-primitiv for flerkolonners/rutenett-oppsett; velg <lm-grid> når topologien er mer enn én akse.
../../handling/button-group/index.html - et mer spesialisert alternativ når barna spesifikt er en gruppe knapper med egen, domenespesifikk styling.

Brukes av:

turer/styles.css og turer/index.html - knapperaden i dashbord-toppen.
slides/komponenter/slide-info/slide-info.js - handlingsknapp-raden på infosiden.
okonomi/index.html - handlingssnarveiene på hjem-siden.
okonomi/forbruk/index.html - import-/kvitteringshandlingene.
index.html (rot) - kontakt-lenkeraden på forsiden.

Avhengigheter: Ingen