Uitlijning van flex elementen langs de hoofdas in CSS
De eigenschap justify-content maakt het mogelijk
elementen langs de hoofdas uit te lijnen. Eerder
heeft u al de waarden center,
space-between, space-around,
space-evenly geleerd. Laten we nu
nog een paar waarden bestuderen.
De waarde flex-start drukt de elementen tegen het begin
van de hoofdas aan, en de waarde flex-end - tegen het einde.
Laten we naar voorbeelden kijken.
Voorbeeld
Laten we de hoofdas van links naar rechts richten, door
de eigenschap flex-direction de waarde row te geven.
Laten we de blokken tegen het begin van de as aandrukken. Hiervoor stellen we justify-content
in op de waarde flex-start:
.parent {
display: flex;
flex-direction: row; /* hoofdas van links naar rechts */
justify-content: flex-start; /* blokken naar het begin van de hoofdas */
}
Resultaat van de code:
Voorbeeld
Laten we de blokken nu tegen het einde van de as aandrukken.
Hiervoor stellen we justify-content in
op de waarde flex-end:
.parent {
display: flex;
flex-direction: row; /* hoofdas van links naar rechts */
justify-content: flex-end; /* blokken naar het einde van de hoofdas */
}
Resultaat van de code:
Voorbeeld
Laten we de hoofdas nu van rechts naar links richten,
door de eigenschap flex-direction de waarde
row-reverse te geven. Laten we de blokken tegen het begin
van de as aandrukken, dat is tegen de rechterkant. Hiervoor stellen we justify-content
in op de waarde flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* hoofdas van rechts naar links */
justify-content: flex-start; /* blokken naar het begin van de hoofdas */
}
Resultaat van de code:
Voorbeeld
Laten we nu de blokken tegen het einde van de hoofdas aandrukken,
dat is tegen de linkerkant. Hiervoor stellen we justify-content
in op de waarde flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* hoofdas van rechts naar links */
justify-content: flex-end; /* blokken naar het einde van de hoofdas */
}
Resultaat van de code:
Voorbeeld
In de vorige voorbeelden was de hoofdas horizontaal gericht. Laten we hem nu omdraaien en verticaal richten.
Laten we de hoofdas naar beneden richten, door
de eigenschap flex-direction de waarde
column te geven.
Laten we de blokken tegen het begin van de hoofdas aandrukken, dat is
tegen de bovenkant. Hiervoor stellen we justify-content
in op de waarde flex-start:
.parent {
display: flex;
flex-direction: column; /* hoofdas van boven naar beneden */
justify-content: flex-start; /* blokken naar het begin van de hoofdas */
}
Resultaat van de code:
Voorbeeld
Laten we nu de blokken tegen het einde van de hoofdas aandrukken,
dat is tegen de onderkant. Hiervoor stellen we justify-content
in op de waarde flex-end:
.parent {
display: flex;
flex-direction: column; /* hoofdas van boven naar beneden */
justify-content: flex-end; /* blokken naar het einde van de hoofdas */
}
Resultaat van de code:
Voorbeeld
Laten we de hoofdas omdraaien, door hem van onderen
naar boven te richten. Hiervoor geven we de eigenschap flex-direction
de waarde column-reverse. In
dit geval veranderen de blokken van volgorde -
aan het begin van de as staat het laatste blok in de HTML
code.
Laten we de blokken tegen het begin van de hoofdas aandrukken,
dat is tegen de onderkant. Hiervoor stellen we justify-content
in op de waarde flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* hoofdas van onder naar boven */
justify-content: flex-start; /* blokken naar het begin van de hoofdas */
}
Resultaat van de code:
Voorbeeld
Laten we de blokken tegen het einde van de hoofdas aandrukken,
dat is tegen de bovenkant. Hiervoor stellen we justify-content
in op de waarde flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* hoofdas van onder naar boven */
justify-content: flex-end; /* blokken naar het einde van de hoofdas */
}
Resultaat van de code:
