Visa källa för 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 <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.

Följande värden kan anges:
=== <code>flex-start</code> ===
[[Fil:FlexboxJustifyStart.png]]

Defaultvärdet. Allt flexmaterial samlas mot starten av flexboxen. Om vi har "normal" <code>[[ltr]]</code> och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot vänsterkanten.
<codepen pen="LVKxLz" height="200" tab="result">
</codepen>

=== <code>flex-end</code> ===
[[Fil:FlexboxJustifiedEnd.png]]

Allt flexmaterial samlas i slutet av flexboxen. Om vi har "normal" [[<code>rtl</code>]]/[[<code>ltr</code>]] och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot högerkanten.
<codepen pen="KpjavK" height="200" tab="result">
</codepen>

=== <code>center</code> ===
[[Fil:FlexboxJustifyCenter.png]]

Allt flexmaterial centreras mot mitten av flexboxen. Kombinerar vi detta med <code>align-items: center;</code> kan vi enkelt centerjustera innehåll såväl horisontellt, som vertikalt.
<codepen pen="eNqVNr" height="200" tab="result">
</codepen>

=== <code>space-between</code> ===
[[Fil:FlexboxJustifySpaceBetween.png]]

Flexelementen distribueras jämt, längs med flexboxen.
<codepen pen="waLgqO" height="200" tab="result">
</codepen>

=== <code>space-around</code> ===
[[Fil:FlexboxJustifySpaceAround.png]]

Flexelementen distribueras jämt, längs med flexboxen och med lika mycket mellanrum mellan varje element.
<codepen pen="doBNZd" height="200" tab="result">
</codepen>

== Nästa aktivitet ==
[[Att använda Flexbox]]