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.
- Flytta alla flexelement så de ligger jämt fördelade mot på raden. De ska börja ifrån kanten på flexlådan.
- Alla boxar ska centreras horisontellt. Första boxen ska ligga längst upp, tvåan i mitten, trean längst ned och fyran i mitten.