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" 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

Flexbox - flexbehållare med flera rader