Du har en navigasjonsmeny der logoen skal til venstre og lenkene til høyre. Eller en hero-seksjon der teksten skal stå midt på siden, både horisontalt og vertikalt. Med justify-content i CSS kontrollerer du plasseringen langs hovedaksen, og med align-items styrer du kryssaksen. Sammen gir disse to egenskapene deg full kontroll over hvordan flex items fordeler seg i en flex container.
Justify-content i CSS: plassering langs hovedaksen
Egenskapen justify-content bestemmer hvordan flex items fordeler seg langs hovedaksen. Som standard er verdien flex-start, som betyr at alle items samler seg ved starten av containeren. Siden hovedaksen som standard går fra venstre til høyre, betyr dette at elementene legger seg til venstre.
Bytter du til flex-end, flyttes alle items til slutten av aksen. Med center havner de i midten. Disse tre verdiene flytter hele gruppen av items som en enhet uten å endre avstanden mellom dem.
Space-verdiene fordeler plass mellom elementer
De tre space-verdiene jobber annerledes. I stedet for å flytte gruppen, fordeler de ledig plass mellom og rundt elementene. Space-between plasserer det første elementet helt i starten og det siste helt i slutten, og fordeler resten av plassen likt mellom elementene i midten.
Space-around gir hvert element like mye plass på begge sider. Det betyr at avstanden mellom to elementer er dobbelt så stor som avstanden mellom et element og kanten av containeren. Mellomrommet på kantene er en halv del, mens mellomrommet mellom to naboer er en hel del.
Space-evenly fordeler all ledig plass helt likt. Avstanden mellom hvert element og mellom elementene og kantene er identisk. Legger du til et fjerde element i containeren, omfordeles plassen automatisk. Flexbox håndterer dette fleksibelt uten at du trenger å justere noe manuelt.
Align-items: plassering langs kryssaksen
Mens justify-content styrer hovedaksen, kontrollerer align-items kryssaksen. Med standard flex-direction er kryssaksen vertikal, så align-items bestemmer den vertikale plasseringen av items i containeren.
Standardverdien er stretch, som betyr at items strekker seg for å fylle hele høyden til containeren. Har du en container som er 300 piksler høy, vil alle items bli 300 piksler høye. Bytter du til flex-start, legger items seg øverst og tar bare den høyden innholdet krever. Flex-end plasserer dem nederst, og center sentrerer dem vertikalt.
Sentrering med flexbox: en linje er alt du trenger
Å sentrere innhold har historisk vært overraskende vanskelig i CSS. Med flexbox er det løst. Sett justify-content: center og align-items: center på en flex container, og innholdet sentreres perfekt i begge retninger. Det er en av grunnene til at flexbox ble så populært så raskt.
Denne teknikken fungerer uansett hvor mange items containeren har, og uansett størrelse på containeren. Du trenger ingen faste måleenheter eller negative marginer. Bare to egenskaper.
Align-self overstyrer enkeltitems
Noen ganger vil du at ett bestemt element skal plasseres annerledes enn resten. Da bruker du align-self direkte på det elementet. Denne egenskapen tar de samme verdiene som align-items, men gjelder bare for det ene elementet du setter den på.
Et typisk eksempel: du har en rad med kort der alle er toppjustert med align-items: flex-start, men ett kort skal sentreres vertikalt. Da setter du align-self: center på det kortet. Resten forblir uberørt. For mer om hvordan du styrer størrelsen på enkeltitems, se flex-grow og flex-shrink.
Forskjellen mellom justify og align oppsummert
Huskeregelen er enkel: justify handler om hovedaksen, align handler om kryssaksen. Når flex-direction er row, betyr det at justify styrer horisontal plassering og align styrer vertikal. Snur du til column, byttes aksene, og dermed byttes også hva justify og align kontrollerer.
Vil du lese mer om alle verdiene og kanttilfeller, har MDN en komplett referanse for justify-content. Se også hvordan flex-wrap påvirker plasseringen når elementer brytes over flere linjer.
Lær mer om flexbox-plassering med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du:
- Visuell demonstrasjon av alle justify-content-verdier med live-eksempler i nettleseren
- Hvordan align-items og align-self fungerer i praksis med ulike containerstørrelser
- Kombinasjoner av justify-content og align-items for vanlige layoutmønstre
