Flexbox - styra layoutflödet längs flexaxeln: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| Rad 2: | Rad 2: | ||
== <code>justify-content</code> == | == <code>justify-content</code> == | ||
Med denna egenskap kan man sätta hur de olika flexelementen ska justeras/fördelas längs med flexaxeln. | 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: | Följande värden kan anges: | ||
=== <code>flex-start</code> === | === <code>flex-start</code> === | ||
[[Fil:FlexboxJustifyStart.png]] | [[Fil:FlexboxJustifyStart.png]] | ||
| Rad 13: | Rad 13: | ||
<codepen pen="LVKxLz" height="200" tab="result"> | <codepen pen="LVKxLz" height="200" tab="result"> | ||
</codepen> | </codepen> | ||
=== <code>flex-end</code> === | === <code>flex-end</code> === | ||
[[Fil:FlexboxJustifiedEnd.png]] | [[Fil:FlexboxJustifiedEnd.png]] | ||
| Rad 21: | Rad 21: | ||
<codepen pen="KpjavK" height="200" tab="result"> | <codepen pen="KpjavK" height="200" tab="result"> | ||
</codepen> | </codepen> | ||
=== <code>center</code> === | === <code>center</code> === | ||
[[Fil:FlexboxJustifyCenter.png]] | [[Fil:FlexboxJustifyCenter.png]] | ||
| Rad 29: | Rad 28: | ||
<codepen pen="eNqVNr" height="200" tab="result"> | <codepen pen="eNqVNr" height="200" tab="result"> | ||
</codepen> | </codepen> | ||
=== <code>space-between</code> === | === <code>space-between</code> === | ||
[[Fil:FlexboxJustifySpaceBetween.png]] | [[Fil:FlexboxJustifySpaceBetween.png]] | ||
| Rad 37: | Rad 36: | ||
<codepen pen="waLgqO" height="200" tab="result"> | <codepen pen="waLgqO" height="200" tab="result"> | ||
</codepen> | </codepen> | ||
=== <code>space-around</code> === | === <code>space-around</code> === | ||
[[Fil:FlexboxJustifySpaceAround.png]] | [[Fil:FlexboxJustifySpaceAround.png]] | ||
| Rad 45: | Rad 43: | ||
<codepen pen="doBNZd" height="200" tab="result"> | <codepen pen="doBNZd" height="200" tab="result"> | ||
</codepen> | </codepen> | ||
== Nästa aktivitet == | == Nästa aktivitet == | ||
[[Flexbox - flexbehållare med flera rader]] | [[Flexbox - flexbehållare med flera rader]] | ||
[[Category:Webbutveckling]] | [[Category:Webbutveckling]] | ||
Versionen från 18 januari 2016 kl. 21.33
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.
space-between
Flexelementen distribueras jämt, längs med flexboxen.
space-around
Flexelementen distribueras jämt, längs med flexboxen och med lika mycket mellanrum mellan varje element.