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.

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.

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. Vilket vi gör i följande exempel.

space-between

Flexelementen distribueras jämt, längs med flexboxen. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får inga marginaler mot ändarna, utan de kommer att placeras i kant med slutpunkterna.

space-around

Flexelementen distribueras jämt, längs med flexboxen och med lika mycket mellanrum mellan varje element. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får halva marginalstorleken jämtemot ändarna. Det vill säga om man lägger samman ändmarginalerna, så blir de tillsammans lika breda som övriga mellanmarginaler i flexbehållaren.

Övningar

Välj "Edit on CodePen" för att göra övningarna där.

• Ändra så att alla flexelement hamnar sist på flexaxeln.

• Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.

Nästa aktivitet

Flexbox - flexbehållare med flera rader