Du har tre bokser som skal ligge ved siden av hverandre, men CSS plasserer dem under hverandre. Du prøver med inline-block, men får uønsket mellomrom. Du justerer med float, men mister kontrollen over høyden. CSS flexbox løser akkurat dette problemet. Med en enkelt egenskap på foreldreelementet endrer du hele layouten, og barna oppfører seg fleksibelt uten hacky løsninger.
Hva er CSS flexbox?
Flexbox er en layoutmodell i CSS som lar deg fordele plass mellom elementer i en container. Før flexbox fantes brukte utviklere float og positioning for å lage layouter. Det fungerte, men var begrensende og frustrerende. Flexbox ble laget som et moderne alternativ der elementer automatisk tilpasser seg plassen de har tilgjengelig.
Modellen bygger på to roller: en flex container og flex items. Containeren er foreldreelementet, og items er barna inni. Når du aktiverer flexbox på containeren, endrer alle barna oppførsel umiddelbart. De slutter å stable seg vertikalt og legger seg i stedet langs en akse.
Slik aktiverer du en flex container
Du gjør et element om til en flex container ved å sette display: flex på det. Det er alt som skal til. Alle direkte barn av dette elementet blir automatisk flex items. Du trenger ikke legge til noe ekstra på barna selv.
Forskjellen fra vanlige blokkelementer er tydelig. Blokkelementer har display: block og stables under hverandre. Når du bytter til display: flex, legger barna seg ved siden av hverandre langs hovedaksen. Ved første øyekast kan dette minne om inline-elementer, men flexbox gir deg langt flere muligheter for justering og fordeling av plass.
Hovedakse og kryssakse
Flexbox jobber med to akser. Hovedaksen bestemmer hvilken retning flex items legger seg i. Som standard går hovedaksen horisontalt fra venstre til høyre. Kryssaksen står vinkelrett på hovedaksen og går dermed vertikalt fra topp til bunn.
Du kan endre retningen på hovedaksen med flex-direction. Verdien row gir horisontal retning, mens column gir vertikal. Forstår du aksene, forstår du hele grunnlaget for hvordan justify-content og align-items plasserer elementer.
Flex items oppfører seg annerledes enn blokkelementer
Når et element blir en flex item, mister det noe av sin vanlige blokk-oppførsel. Et blokkelement tar normalt hele bredden av foreldreelementet. En flex item tar bare den plassen innholdet trenger. Flere items deler på plassen i containeren.
Du kan kontrollere hvor mye plass hvert item tar med egenskaper som flex-grow og flex-shrink. Disse bestemmer om et element skal vokse for å fylle ledig plass eller krympe når det er for trangt. Padding og margin fungerer fortsatt som vanlig på flex items, men margin kan i tillegg brukes med verdien auto for å skyve elementer til motsatt side av containeren.
Når bør du bruke flexbox?
Flexbox egner seg best for endimensjonale layouter. Det betyr at du jobber langs en retning om gangen: enten en rad eller en kolonne. Typiske bruksområder er navigasjonsmenyer, kortlayouter på en linje, og sentrering av innhold både horisontalt og vertikalt.
For todimensjonale layouter der du trenger kontroll over både rader og kolonner samtidig, er CSS Grid et bedre valg. I praksis kombinerer mange utviklere begge metodene i samme prosjekt. Flexbox for komponenter, Grid for den overordnede sidestrukturen.
Vil du lese mer om flexbox-modellen i detalj, har MDN en grundig gjennomgang av alle konseptene.
Lær mer om flexbox med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du:
- Hvordan du setter opp flex containere og forstår forholdet mellom container og items
- Praktiske eksempler der du bygger layouter steg for steg i nettleseren
- Forskjellen mellom flexbox og CSS Grid, og når du bør bruke hva
