Hva er flexbox?

Flexbox er et kraftig verktøy i CSS-verktøykassen. Det løser noen vanlige utfordringer med dagens float-baserte layouts, og åpner opp for nye muligheter.

Ikke en erstatning for ‘float’

Før jeg gravde meg ned i hva flexbox virkelig var, hadde jeg en oppfatning av at det var en erstatning for float. Etter å ha brukt det en stund, innser jeg at det er mer et nytt verktøy, enn et verktøy som erstatter et annet. Floats har fortsatt sin plass, men flexbox er et bedre verktøy for mange av jobbene floats tidligere har gjort.

Det betyr også at man kan ta et nettsted som allerede eksisterer og drysse flexbox der det måtte være hensiktsmessig.

Hvor god er støtten?

I følge caniuse.com har vi i Norge en støtte på 96,44 %. De resterende prosentene består av Internet Explorer 8 og 9. Du bør selv sjekke besøksstatistikken eller målgruppen (hvis du ikke har lansert enda) for å se hvor god støtten er.

Du bør også ta hensyn til prefikser og nettlesere som støtter den utdaterte anbefalingen. Verktøy som Sass/Compass, Autoprefixer og lignende kan hjelpe deg med dette.

Hva gjør flexbox bedre enn floats?

Flexbox fungerer på en helt annen måte enn floats. Først og fremst til å løse det som tradisjonelt sett har vært vanskelig å løse med floats, men i fremtiden vil vi se nye layouts og løsninger dukke opp på grunn av mulighetene flexbox gir oss.

Vanlige problemer man møter på når man jobber med HTML/CSS som flexbox løser:

Vertikalt sentrere et element

For eksempel hvis du ønsker å få tekst midt på et bilde både horisontalt og vertikalt.

Sentrert tekst, både horisontalt, vertikalt og over flere linjer
Illustrasjon av tekst som ligger sentrert både vertikalt og horisontalt over et fotografi.

 

Jevnt distribuere elementer horisontalt

Uten å måtte ta hensyn til hvor mange elementer det er. For eksempel i en horisontal navigasjonsmeny hvor du ønsker at elementene jevnt skal distribuere seg over hele navigasjonslinjen.

Lik avstand mellom menyelementene
Illustrasjon som viser jevn distribusjon av luften mellom elementene i en navigasjonsmeny.

Endre rekkefølgen på elementer i DOM-en

For eksempel hvis man på mobil ønsker en annen rekkefølge enn den man har i DOM-en.

Lage grids enklere

Her kan man enkelt distribuere bilder eller produkter jevnt, og enkelt ta hensyn til den responsive delen av det.

Det åpner også opp for nye muligheter layout-messig; både på desktop og på mobil.

Med hjelp av conditional classes kan du også bake inn en grasiøs fallback til de få prosentene som sitter på eldre nettlesere som IE8 og IE9.

Hvordan fungerer det?

I prinsippet har man to nye elementer i flexbox: Flexbox-kontaineren og flexbox-elementet. Man gjør et element til en flexbox-kontainer med display: flex; og da vil alle direkte barn av det kontainer-elementet automatisk bli flexbox-elementer.

<!– Hvis denne er satt til display: flex; … –>
<div class="kontainer">
  <!– … blir disse elementene rett under automatisk til flexbox-element –>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

Flexbox-elementene vil som standard legge seg på en horisontal linje i flexbox-kontaineren. (Som følge av standard-verdien: flex-direction: row;.)

display: flex;

Fra før av kjenner du kanskje til display:-propertyen som tar verdier som block, inline, inline-block (og noen andre mer obskure verdier). For å gjøre en boks til en flexbox setter man display: til flex eller inline-flex. Utad vil flex-kontaineren oppføre seg som et block-element med flex, men som et inline-element med inline-flex. Akkurat som block og inline-block.

.kontainer {
  display: flex;
  /* Ikke glem prefixer og støtte for IE10 (gammel syntaks) */
}

/* Kun for å tydeliggjøre elementene */
.kontainer {
  padding: 16px;
  background: black;
  font-family: sans-serif;
}
.kontainer > * {
  padding: 8px;
  border: 5px solid #ff00f6;
  color: #ff00f6;
  font-size: 24px;
  margin: 5px
}

See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

Akser

Når et element er satt til display: flex; får man to akser å tenke på: Hovedaksen og kryssaksen. Hovedaksen går i den retningen du har satt flyten til. Hvis du ikke har definert en flytretning er standard flytretning row. Det betyr at elementene er «tredd på en snor» horisontalt over boksen. Hvis du endrer retning til column henger snoren fra toppen av boksen til bunnen. Startpunktet for boksene er venstre på row og toppen på column.

flex-direction: row; (row er standardverdien.)

See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

flex-direction: column; See the Pen Flexbox-artikkel by Erling Hamso (@okse) on CodePen.

Man kan distribuere, endre startpunkt, endre på rekkefølgen og mye annet på disse elementene som ligger på enten hovedaksen eller kryssaksen.

Flexbox inni flexbox

Da jeg begynte å lære meg flexbox, føltes konseptet med en flexbox inni en flexbox som en hack. Det viste seg å være feil, og man kan gjøre mange flere ting med å legge flexboxer inni hverandre. Merk: Et flexbox-element også kan være en flexbox-kontainer.

Hva mer er det?

Det er flust med ting du kan gjøre med flexbox, men intensjonen med denne artikkelen er ikke å forklare alt. Under har du lenker til ressurser som gjør en ypperlig jobb med å forklare nærmere hva flexbox er og hvordan du kan bruke det.

Er det noe spesifikt du lurer på kan du veldig gjerne legge igjen et spørsmål til meg i kommentarfeltet!

Lær deg Flexbox