Flexbox - justering av flexinnehåll som ligger på flera rader: Skillnad mellan sidversioner

Versionen från 25 augusti 2015 kl. 12.21

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.

`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.

Nästa aktivitet

Att använda Flexbox

@@ Rad 2: / Rad 2: @@
 == <code>[[align-content]]</code> ==
-Denna egenskaps värden påminner mycket om de som används med <code>[[justify-content]]</code>. Så om du kan den egenskapen bra, då ska det inte vara några problem att lära sig denna nya.
+Denna egenskaps värden påminner mycket om de som används med <code>[[justify-content]]</code>. 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:
+=== <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.
 == Nästa aktivitet ==
 [[Att använda Flexbox]]