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> == | ||
<div class="well"> | |||
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> === | ||
<div class="well"> | |||
[[Fil:FlexboxJustifyStart.png]] | [[Fil:FlexboxJustifyStart.png]] | ||
| Rad 11: | Rad 13: | ||
<codepen pen="LVKxLz" height="200" tab="result"> | <codepen pen="LVKxLz" height="200" tab="result"> | ||
</codepen> | </codepen> | ||
</div> | |||
=== <code>flex-end</code> === | === <code>flex-end</code> === | ||
<div class="well"> | |||
[[Fil:FlexboxJustifiedEnd.png]] | [[Fil:FlexboxJustifiedEnd.png]] | ||
| Rad 18: | Rad 21: | ||
<codepen pen="KpjavK" height="200" tab="result"> | <codepen pen="KpjavK" height="200" tab="result"> | ||
</codepen> | </codepen> | ||
</div> | |||
=== <code>center</code> === | === <code>center</code> === | ||
<div class="well"> | |||
[[Fil:FlexboxJustifyCenter.png]] | [[Fil:FlexboxJustifyCenter.png]] | ||
| Rad 25: | Rad 29: | ||
<codepen pen="eNqVNr" height="200" tab="result"> | <codepen pen="eNqVNr" height="200" tab="result"> | ||
</codepen> | </codepen> | ||
</div> | |||
=== <code>space-between</code> === | === <code>space-between</code> === | ||
<div class="well"> | |||
[[Fil:FlexboxJustifySpaceBetween.png]] | [[Fil:FlexboxJustifySpaceBetween.png]] | ||
| Rad 32: | Rad 37: | ||
<codepen pen="waLgqO" height="200" tab="result"> | <codepen pen="waLgqO" height="200" tab="result"> | ||
</codepen> | </codepen> | ||
</div> | |||
=== <code>space-around</code> === | === <code>space-around</code> === | ||
<div class="well"> | |||
[[Fil:FlexboxJustifySpaceAround.png]] | [[Fil:FlexboxJustifySpaceAround.png]] | ||
| Rad 39: | Rad 45: | ||
<codepen pen="doBNZd" height="200" tab="result"> | <codepen pen="doBNZd" height="200" tab="result"> | ||
</codepen> | </codepen> | ||
</div> | |||
</div> | |||
== Nästa aktivitet == | == Nästa aktivitet == | ||
[[Flexbox - flexbehållare med flera rader]] | [[Flexbox - flexbehållare med flera rader]] | ||
Versionen från 13 september 2015 kl. 18.57
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.
