Flex Syntax

CSS Flexbox (Flexible Box Layout) er en layout-metode i CSS som gjør det enklere å plassere, justere og fordele plass mellom elementer i et container-element. Den gjør det spesielt lett å lage responsive layouter fordi elementene automatisk kan tilpasse størrelse og rekkefølge etter tilgjengelig plass.

Beste praksis: box-sizing

Når vi bygger layouter med Flexbox, er det nærmest en bransjestandard å bruke universalselektoren (*) for å sette box-sizing: border-box; på absolutt alle elementer:

* {
  box-sizing: border-box;
}

Standard atferd i CSS er at "padding" og kanter ("border") legges i tillegg til bredden du setter på et element. Dette skaper ofte problemer i Flexbox, hvor en boks plutselig vokser seg større enn forventet og dytter andre elementer ut av posisjon. Med border-box inkluderes padding og border i den opprinnelige bredden, slik at elementets totale størrelse er mye enklere å kontrollere.

Her kan du se hvordan det virker!

Flex-container

display
Mulige verdier: flex, inline-flex

Gjør elementet til en flex container. "flex" lager en blokklinje, mens "inline-flex" beholder flyten som et inline-element.
flex-direction
Mulige verdier: row, row-reverse, column, column-reverse

Bestemmer hovedaksen: horisontalt (row), horisontalt omvendt (row-reverse) eller vertikalt (column og column-reverse).
flex-wrap
Mulige verdier: nowrap, wrap, wrap-reverse

Styrer om elementene skal brytes til flere linjer. "wrap-reverse" snur retningen på nye linjer.
justify-content
Mulige verdier: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right

Fordeler plass langs hovedaksen – fra start til slutt, med jevne mellomrom eller eksplisitt mot venstre/høyre (left/right) eller start/slutt i skrivriktningen.
align-items
Mulige verdier: stretch, flex-start, flex-end, center, baseline, start, end

Posisjonerer elementene på tvers av hovedaksen. Standard er stretch, men du kan også bruke flex-start/flex-end, center, baseline eller de logiske start/end-verdiene.
gap
Mulige verdier: normal, lengde, prosent

Setter avstand mellom flex-elementene på både hoved- og kryssaksen. Verdien kan være "normal", piksel/rem/em-lengder eller prosenter.

Flex-elementer

flex-basis
Mulige verdier: auto, content, lengde, prosent, min-content, max-content, fit-content

Angir startstørrelsen før flex-fordeling. "auto" bruker bredden/høyden, "content" følger innholdet, du kan angi faste lengder/prosenter, eller bruke innholdsbaserte nøkkelord som min-/max-/fit-content.
order
Mulige verdier: heltall

Endrer rekkefølgen elementene tegnes i uten å påvirke kilderekkefølgen. Lavere tall vises først. Standard verdi er 0.
align-self (align-selv)
Mulige verdier: auto, flex-start, flex-end, center, baseline, stretch, self-start, self-end

Overstyrer "align-items" for enkelt-elementer. "auto" betyr at elementet arver fra containeren.