Flexbox - styra layoutflödet längs flexaxeln

Vi vill självklart kunna styra hur layouten sker i förhållande till flexaxeln också. Det görs med egenskapen justify-content

justify-content

Med denna egenskap kan man sätta hur de olika flexelementen ska justeras/fördelas längs med flexaxeln.

Följande värden kan anges:

flex-start

Defaultvärdet. Allt flexmaterial samlas mot starten av flexboxen. Om vi har "normal" [[rtl]]/[[ltr]] och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot vänsterkanten.

See the Pen LVKxLz by Patrik Grip-Jansson (@PGJ) on CodePen.

flex-end

Allt flexmaterial samlas i slutet av flexboxen. Om vi har "normal" [[rtl]]/[[ltr]] och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot högerkanten.

See the Pen KpjavK by Patrik Grip-Jansson (@PGJ) on CodePen.

center

Allt flexmaterial centreras mot mitten av flexboxen. Kombinerar vi detta med align-items: center; kan vi enkelt centerjustera innehåll såväl horisontellt, som vertikalt.

See the Pen eNqVNr by Patrik Grip-Jansson (@PGJ) on CodePen.

space-between

Flexelementen distribueras jämt, längs med flexboxen.

See the Pen waLgqO by Patrik Grip-Jansson (@PGJ) on CodePen.

space-around

Flexelementen distribueras jämt, längs med flexboxen och med lika mycket mellanrum mellan varje element.

See the Pen doBNZd by Patrik Grip-Jansson (@PGJ) on CodePen.

Nästa aktivitet

Att använda Flexbox