Justering av flex-elementer langs hovedaksen i CSS
Egenskapen justify-content tillater
justering av elementer langs hovedaksen. Tidligere
har du allerede lært verdiene center,
space-between, space-around,
space-evenly. La oss nå studere
noen flere verdier.
Verdien flex-start presser elementene til starten av
hovedaksen, og verdien flex-end - til slutten.
La oss se på eksempler.
Eksempel
La oss rette hovedaksen fra venstre til høyre, ved å sette
egenskapen flex-direction til verdien row.
La oss presse blokkene til starten av aksen. For å gjøre dette, sett justify-content
til verdien flex-start:
.parent {
display: flex;
flex-direction: row; /* hovedaksen fra venstre til høyre */
justify-content: flex-start; /* blokker til starten av hovedaksen */
}
Resultat av kodekjøring:
Eksempel
La oss nå presse blokkene til slutten av aksen.
For å gjøre dette, sett justify-content
til verdien flex-end:
.parent {
display: flex;
flex-direction: row; /* hovedaksen fra venstre til høyre */
justify-content: flex-end; /* blokker til slutten av hovedaksen */
}
Resultat av kodekjøring:
Eksempel
La oss nå rette hovedaksen fra høyre til venstre,
ved å sette egenskapen flex-direction til verdien
row-reverse. La oss presse blokkene til starten av
aksen, det vil si til høyre kant. For å gjøre dette, sett justify-content
til verdien flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* hovedaksen fra høyre til venstre */
justify-content: flex-start; /* blokker til starten av hovedaksen */
}
Resultat av kodekjøring:
Eksempel
La oss nå presse blokkene til slutten av hovedaksen,
det vil si til venstre kant. For å gjøre dette, sett justify-content
til verdien flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* hovedaksen fra høyre til venstre */
justify-content: flex-end; /* blokker til slutten av hovedaksen */
}
Resultat av kodekjøring:
Eksempel
I de foregående eksemplene var hovedaksen rettet horisontalt. La oss nå snu den og rette den vertikalt.
La oss rette hovedaksen nedover, ved å sette
egenskapen flex-direction til verdien
column.
La oss presse blokkene til starten av hovedaksen, det vil si
til øvre kant. For å gjøre dette, sett justify-content
til verdien flex-start:
.parent {
display: flex;
flex-direction: column; /* hovedaksen ovenfra og ned */
justify-content: flex-start; /* blokker til starten av hovedaksen */
}
Resultat av kodekjøring:
Eksempel
La oss nå presse blokkene til slutten av hovedaksen,
det vil si til nedre kant. For å gjøre dette, sett justify-content
til verdien flex-end:
.parent {
display: flex;
flex-direction: column; /* hovedaksen ovenfra og ned */
justify-content: flex-end; /* blokker til slutten av hovedaksen */
}
Resultat av kodekjøring:
Eksempel
La oss snu hovedaksen, ved å rette den fra bunnen
og opp. For å gjøre dette, sett egenskapen flex-direction
til verdien column-reverse. I
dette tilfellet vil blokkene endre rekkefølge -
i starten av aksen vil den siste blokken i HTML-
koden stå.
La oss presse blokkene til starten av hovedaksen,
det vil si til nedre kant. For å gjøre dette, sett justify-content
til verdien flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* hovedaksen nedenfra og opp */
justify-content: flex-start; /* blokker til starten av hovedaksen */
}
Resultat av kodekjøring:
Eksempel
La oss presse blokkene til slutten av hovedaksen,
det vil si til øvre kant. For å gjøre dette, sett justify-content
til verdien flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* hovedaksen nedenfra og opp */
justify-content: flex-end; /* blokker til slutten av hovedaksen */
}
Resultat av kodekjøring:
