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) |
||
| (5 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/kolumner. Se denna [[Mer_flexbox#align-content|sektion]] för mer utförlig information. | |||
== Egenskaper == | |||
<div class="well well-neutral-light"> | |||
{| 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. | |||
</div> | |||
== Exempel == | |||
<div class="well well-neutral-light"> | |||
<codepen pen="QbXVgK" height="500" tab="css,result"> | |||
</codepen> | |||
</div> | |||
== Egenskapens definition == | |||
<div class="well well-neutral-light"> | |||
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.