Flex med bokser: Magnus Dæhlen from JavaZone on Vimeo.
Hva er Flexbox?
Flexbox, eller “CSS3 Flexible box layout”, er en CSS layout som gjør det enklere å implementere dynamiske nettsider. Flexbox har vært under utvikling over flere år, men det var først i fjor det fikk stor oppmerksomhet. Mye av dette skyldes at Flexbox ble den valgte layouten for React Native.
Med dagens antall mobile enheter begynte arbeidsmengden å bli tyngre og tyngre for CSS-en til hver enkelts nettside. I dag finnes det utallige forskjellige enheter med forskjellige skjermstørrelser. I tillegg kommer mange av disse med muligheten til å vise innhold både vertikalt og horisontalt. Tidligere brukte man media queries i CSS til å løse problematikk rundt struktur for forskjellige enheter. Med dagens antall enheter blir dette uhåndterbart. Flexbox kom som et svar på at ikke var noe klar måte å strukturere dynamisk og responsive nettsider. Dette ble også et stort problem med nettsider der man har et ukjent antall elementer som kommer inn i DOM-en, som nesten alle webapplikasjoner har i dag.
Per dags dato er Flexbox fortsatt en såkalt Candidate Recommendation, men det er bare et spørsmål om tid før det er en W3C-standard. Alle dagens nettlesere har full Flexbox-støtte (med mindre en regner eldre versjoner av IE som en nettleser).
Hvorfor bruke Flexbox?
Å strukturere en nettsiden som inneholder et ukjent antall elementer kan være utfordrende. Mye kan løses med mange av dagens gridløsninger, som for eksempel Bootstrap sin, men det krever ofte mer CSS og mye kunnskap om hvordan CSS oppfører seg. Flexbox krever lite CSS for å gjøre operasjoner som før var vanskelige. Å sentrere alle elementene i en div kan nå gjøres med bare to linjer CSS:
display: flex;
justify-content: center;
Men Flexbox er ikke en silver bullet. For eksempel vil jeg ikke anbefale å utelukkende bruke Flexbox som layout. Det vil være flere steder der antall elementer er kjent og dermed ikke trenger noe dynamisk layout. Da vil det være fornuftig å skrive sin egen CSS for rammene eller bruke et tredjeparts grid-rammeverk. Du kan tenke deg at et grid er rammen til et bilde, mens alt inne i bildet er Flexbox.
Sist vil jeg påpeke at Flexbox gjør layout-bygging morsomt. Det er enkelt å flytte elementene i en div uten å måtte slåss med bredder, wrapping og andre utfordringer.
Flexbox 101
Så litt mer teknisk hva det faktisk er. Flexbox kan deles i to, ett sett med container-sentrerte kommandoer og ett sett med item-sentrerte kommandoer.
Det første man må lære seg er det “the magic word”, display: flex . Det definerer at containeren din skal få layouten Flexbox.
.my-container {
display: flex;
}
Neste steg er å lære seg at når man bruker Flexbox så snakker man om en hovedakse og en crossakse. Hovedaksen er aksen du vil fokusere elementene rundt. Dette kan være x- eller y-aksen etter hva du definerer. Crossaksen vil være den motsatte aksen av den du definerer som hovedaksen.
Så hvordan gjør man det? Det gjøres slik flex-direction: row/column . Row er x-aksen og column er y-aksen. Én kan også reversere dem ved å legge på -reverse etter. Man kan også definere om elementene skal wrappe når de blir for store for boksen eller krympe slik at de passer. Det gjøres med flex-wrap. Under er et eksempel med flex-direction og flex-row pluss attributtet flex-flow som er 2 i 1.
.my-container {
flex-direction: row;
flex-wrap: wrap;
//COMBO!
flex-flow: row wrap;
}
Den kanskje viktigste tingen å lære seg er attributtet justify-content. Den sørger for å holde styr på hvordan elementene dine legger seg på hovedaksen. Se eksempel i paragrafen om hvorfor Flexbox.
justify-content
Det siste attributtet vi viser er align-items. Det er rett og slett det motsatte av justify-content. Det bestemmer hvordan elementene legger seg på cross-aksen. Altså den motsatte aksen av justify-content.
For eksempel om din cross-akse er satt til Y og man har en satt høyde så kan man definere hvordan elementene skal legge seg i høyden.
.my-container {
justify-content: space-between;
align-items: center;
}
Tilslutt
Flexbox er her for å bli. Dermed vil vi sterkt anbefale å lære litt av hvordan det fungerer, enten jobber daglig med CSS og HTML eller bare litt. Det er også enkelt å starte med og enkelt å se endringene man ønsker.
W3C jobber også med en standard for et grid, “CSS Grid Layout”, som kanskje vil ta over for alle tredjeparts gridløsninger som finnes i dag. Vi gleder oss allerede til å bygge dynamiske nettsider med både Grid og Flexbox.
Noen tips til hvor man kan starte å leke med Flexbox:
CSS Tricks har en veldig god tutorial på sin nettside, CSS Tricks
Flexbox Froggy er et spill som går utpå å plassere froskene på sine respektive blader med Flexbox. Det gjør læring spesielt morsom. flexboxfroggy.com
Gogo start flexing!
Eksterne lenker:
The Iterate Blog 