Align-content: Skillnad mellan sidversioner
Från Webbling
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) |
||
(4 mellanliggande sidversioner av samma användare visas inte) | |||
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/kolumner. 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 == | ||
<codepen pen="QbXVgK" height=" | <div class="well well-neutral-light"> | ||
<codepen pen="QbXVgK" height="500" tab="css,result"> | |||
</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> |
Nuvarande version från 12 januari 2019 kl. 23.23
Justerar hur en flexbehållares innehåll placeras ut längs med flexaxeln när innehållet hamnar på flera rader/kolumner. 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.