Hoppa till: navigering, sök

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

FlexboxJustifyStart.png

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

FlexboxJustifiedEnd.png

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

FlexboxJustifyCenter.png

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.

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

space-between

FlexboxJustifySpaceBetween.png

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.


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

space-around

FlexboxJustifySpaceAround.png

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.


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

Ö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.

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

  • 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.

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

Nästa aktivitet

Hämtad från "https://webbling.se/index.php?title=Flexbox_-_styra_layoutflödet_längs_flexaxeln&oldid=4464"