Flexbox - styra layoutflödet längs flexaxeln: Skillnad mellan sidversioner

Från Webbling
Hoppa till: navigering, sök
(Skapade sidan med 'Vi vill självklart kunna styra hur layouten sker i förhållande till flexaxeln också. Det görs med egenskapen <code>justify-content</code> == <code>justify-content</code>...')
 
Rad 23: Rad 23:


Allt flexmaterial centreras mot mitten av flexboxen.
Allt flexmaterial centreras mot mitten av flexboxen.
<codepen pen="waLgqO" height="200" tab="result">
<codepen pen="eNqVNr" height="200" tab="result">
</codepen>
</codepen>



Versionen från 25 augusti 2015 kl. 09.37

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

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.

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

space-between

FlexboxJustifySpaceBetween.png

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

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.

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

Nästa aktivitet

Att använda Flexbox