Flexbox - justering av flexinnehåll som ligger på flera rader: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) |
||
(23 mellanliggande sidversioner av samma användare visas inte) | |||
Rad 2: | Rad 2: | ||
== <code>[[align-content]]</code> == | == <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. Egenskapen kan tilldelas följande värden: | 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> === | === <code>flex-start</code> === | ||
Flexinnehållet flyttas mot flexboxens start. | |||
<codepen pen="EjqLzp" height=" | Flexinnehållet flyttas mot flexboxens start. Detta är defaultvärdet. | ||
<codepen pen="EjqLzp" height="300" tab="css,result"> | |||
</codepen> | </codepen> | ||
=== <code>flex-end</code> === | === <code>flex-end</code> === | ||
Flexinnehållets flyttas mot flexboxens slut. | Flexinnehållets flyttas mot flexboxens slut. | ||
<codepen pen="zGgjgL" height="375" tab="css,result"> | |||
</codepen> | |||
=== <code>center</code> === | === <code>center</code> === | ||
Flexinnehållet centreras mellan flexboxens start och slut. | Flexinnehållet centreras mellan flexboxens start och slut. | ||
<codepen pen="EjqLqe" height="350" tab="css,result"> | |||
</codepen> | |||
=== <code>space-between</code> === | === <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. | 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. | ||
<codepen pen="Jdgvgw" height="400" tab="css,result"> | |||
</codepen> | |||
=== <code>space-around</code> === | === <code>space-around</code> === | ||
Alla rader fördelas så att det är lika mycket tomrum mellan dem. | Alla rader fördelas så att det är lika mycket tomrum mellan dem. | ||
<codepen pen="YXmLmm" height="350" tab="css,result"> | |||
</codepen> | |||
=== <code>stretch</code> === | === <code>stretch</code> === | ||
Flexinnehållet sträcks ut, så att det fyller allt tillgängligt tomrum. | |||
Flexinnehållet sträcks ut, så att det fyller allt tillgängligt tomrum. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser. | |||
<codepen pen="PqMaYZ" height="350" tab="css,result"> | |||
</codepen> | |||
== Nästa aktivitet == | == Nästa aktivitet == | ||
[[ | [[Flexbox - byta ordning]] | ||
[[Category:Webbutveckling]] |
Nuvarande version från 25 januari 2019 kl. 15.56
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.
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. 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.