Align-content: Skillnad mellan sidversioner
Från Webbling
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
Rad 1: | Rad 1: | ||
Justerar hur en flexbehållares innehåll placeras ut längs med flexaxeln när innehållet hamnar på flera rader. Se denna [[Mer_flexbox#align-content|sektion]] för mer utförlig information. | Justerar hur en flexbehållares innehåll placeras ut längs med flexaxeln när innehållet hamnar på flera rader. Se denna [[Mer_flexbox#align-content|sektion]] för mer utförlig information. | ||
== Egenskaper == | == Egenskaper == | ||
<div class="well well-neutral-light"> | |||
{| class="wikitable" | {| class="wikitable" | ||
| Parametrar | | Parametrar | ||
Rad 29: | Rad 30: | ||
<code>stretch</code> Flexinnehållet sträcks ut, så att det fyller allt tillgängligt tomrum. | <code>stretch</code> Flexinnehållet sträcks ut, så att det fyller allt tillgängligt tomrum. | ||
</div> | |||
== Exempel == | == Exempel == | ||
<div class="well well-neutral-light"> | |||
<codepen pen="QbXVgK" height="200" tab="css"> | <codepen pen="QbXVgK" height="200" tab="css"> | ||
</codepen> | </codepen> | ||
</div> | |||
== Egenskapens definition == | == Egenskapens definition == | ||
<div class="well well-neutral-light"> | |||
http://dev.w3.org/csswg/css3-flexbox/#align-content | http://dev.w3.org/csswg/css3-flexbox/#align-content | ||
</div> |
Versionen från 19 september 2015 kl. 17.25
Justerar hur en flexbehållares innehåll placeras ut längs med flexaxeln när innehållet hamnar på flera rader. Se denna sektion för mer utförlig information.
Egenskaper
Parametrar | flex-start | flex-end | center | space-between | space-around | stretch
|
Defaultvärde | stretch
|
Ärvs? | Nej |
Animerbart? | Nej |
Fungerar med... | Flexbehållare, med innehåll som sträcker sig över flera "rader". |
flex-start
flexinnehållet flyttas mot flexboxens start.
flex-end
flexinnehållets flyttas mot flexboxens slut.
center
flexinnehållet centreras mellan flexboxens start och slut.
space-between
De två yttersta raderna flyttas ut till flexboxens start respektive slut. Eventuella mellanliggande rader fördelas så att de ligger med lika mycket mellanrum mellan varje rad.
space-around
Alla rader fördelas så att det är lika mycket tomrum mellan dem.
stretch
Flexinnehållet sträcks ut, så att det fyller allt tillgängligt tomrum.