Align-content: Skillnad mellan sidversioner
Från Webbling
PGJ (diskussion | bidrag) (Skapade sidan med 'https://developer.mozilla.org/en-US/docs/Web/CSS/align-content') |
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. | |||
== Egenskaper == | |||
{| class="wikitable" | |||
| Parametrar | |||
| <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> | |||
|- | |||
| Defaultvärde | |||
| <code>stretch</code> | |||
|- | |||
| Ärvs? | |||
| Nej | |||
|- | |||
| Animerbart? | |||
| Nej | |||
|- | |||
| Fungerar med... | |||
| Flexbehållare, med innehåll som sträcker sig över flera "rader". | |||
|} | |||
<code>flex-start</code> flexinnehållet flyttas mot flexboxens start. | |||
<code>flex-end</code> flexinnehållets flyttas mot flexboxens slut. | |||
<code>center</code> flexinnehållet centreras mellan flexboxens start och slut. | |||
<code>space-between</code> 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. | |||
<code>space-around</code> Alla rader fördelas så att det är lika mycket tomrum mellan dem. | |||
<code>stretch</code> Flexinnehållet sträcks ut, så att det fyller allt tillgängligt tomrum. | |||
== Exempel == | |||
<codepen pen="QbXVgK" height="200" tab="css"> | |||
</codepen> | |||
== Egenskapens definition == | |||
http://dev.w3.org/csswg/css3-flexbox/#align-content |
Versionen från 21 augusti 2015 kl. 16.36
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.