Flexbox - justering av flexinnehåll som ligger på flera rader

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

Defaultbeteendet är att de flexelement som trillar över på en ny rad justeras mot flexstarten. Detta är ofta ett bra grundbeteende. Men det är inte alltid vi vill ha det så. Därför finns det en egenskap man kan använda för att styra detta, nämligen align-content.

align-content

Denna egenskaps värden påminner mycket om de som används med justify-content. Så om du kan den egenskapen bra, då ska det inte vara några problem att lära sig denna nya. Egenskapen kan tilldelas följande värden:

flex-start

Flexinnehållet flyttas mot flexboxens start. Detta är defaultvärdet.

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

flex-end

Flexinnehållets flyttas mot flexboxens slut.

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

center

Flexinnehållet centreras mellan flexboxens start och slut.

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

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.

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

space-around

Alla rader fördelas så att det är lika mycket tomrum mellan dem.

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

stretch

Flexinnehållet sträcks ut, så att det fyller allt tillgängligt tomrum. Dock tar webbläsaren eventuella height/max-height och width/max-width, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser.

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

Nästa aktivitet

Flexbox - byta ordning