Flexbox - styra layoutflödet längs flexaxeln: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| Rad 1: | Rad 1: | ||
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> | 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> == | == <code>justify-content</code> == | ||
Versionen från 25 augusti 2015 kl. 10.03
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.