Align-content

Från Webbling
Hoppa till: navigering, sök

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.

Exempel

See the Pen QbXVgK by Patrik Grip-Jansson (@PGJ) on CodePen.

Egenskapens definition