Uitlijning van flexblokken langs de dwarsas in CSS
Laten we nu de blokken ook langs de
dwarsas uitlijnen. Uitlijning langs deze as
wordt ingesteld met de eigenschap align-items. De waarde
flex-start drukt de elementen tegen het begin
van de as, en de waarde flex-end - tegen het einde.
Laten we het uitproberen met voorbeelden.
Voorbeeld
Laten we de hoofdas van links naar rechts richten. In dit geval zal de dwarsas van boven naar beneden gericht zijn. Laten we de positie van onze blokken regelen, zowel langs de hoofdas als langs de dwarsas.
Langs de hoofdas drukken we de blokken tegen het begin,
d.w.z. tegen de linkerrand. Hiervoor stellen we justify-content
in op de waarde flex-start. Langs
de dwarsas drukken we de blokken ook tegen het begin,
d.w.z. tegen de bovenrand. Hiervoor stellen we align-items
ook in op de waarde flex-start.
Laten we kijken wat we krijgen:
.parent {
display: flex;
flex-direction: row; /* hoofdas naar rechts, dwarsas naar beneden */
justify-content: flex-start; /* blokken naar het begin van de hoofdas */
align-items: flex-start; /* blokken naar het begin van de dwarsas */
}
Resultaat van de code:
Voorbeeld
Laten we nu de blokken tegen het einde van de dwarsas
drukken, d.w.z. tegen de onderkant. Hiervoor stellen we align-items
in op de waarde flex-end:
.parent {
display: flex;
flex-direction: row; /* hoofdas naar rechts, dwarsas naar beneden */
justify-content: flex-start; /* blokken naar het begin van de hoofdas */
align-items: flex-end; /* blokken naar het einde van de dwarsas */
}
Resultaat van de code:
Voorbeeld
Laten we nu de hoofdas van boven naar beneden richten. Aangezien de hoofdas verticaal is, zal de dwarsas van rechts naar links gericht zijn. Laten we de blokken langs beide assen tegen hun begin drukken:
.parent {
display: flex;
flex-direction: column; /* hoofdas naar beneden, dwarsas naar rechts */
justify-content: flex-start; /* blokken naar het begin van de hoofdas */
align-items: flex-start; /* blokken naar het begin van de dwarsas */
}
Resultaat van de code:
Voorbeeld
En nu drukken we de blokken langs de dwarsas tegen het einde ervan:
.parent {
display: flex;
flex-direction: column; /* hoofdas naar beneden, dwarsas naar rechts */
justify-content: flex-start; /* blokken naar het begin van de hoofdas */
align-items: flex-end; /* blokken naar het einde van de dwarsas */
}
Resultaat van de code:
Voorbeeld
Laten we de blokken tegen het einde van beide assen drukken:
.parent {
display: flex;
flex-direction: column; /* hoofdas naar beneden, dwarsas naar rechts */
justify-content: flex-end; /* blokken naar het einde van de hoofdas */
align-items: flex-end; /* blokken naar het einde van de dwarsas */
}
Resultaat van de code:
Voorbeeld
Laten we de richting van de hoofdas veranderen - van onder naar boven. De dwarsas verandert zijn richting niet, omdat de hoofdas nog steeds verticaal is.
Laten we de blokken tegen het begin van beide assen drukken:
.parent {
display: flex;
flex-direction: column-reverse; /* hoofdas naar boven, dwarsas naar rechts */
justify-content: flex-start; /* blokken naar het begin van de hoofdas */
align-items: flex-start; /* blokken naar het begin van de dwarsas */
}
Resultaat van de code:
