Justering av flex-blokker langs tverraksen i CSS
La oss nå justere blokkene
langs tverraksen. Justering langs denne aksen
angis med egenskapen align-items. Verdien
flex-start presser elementene mot starten av
aksen, og verdien flex-end - mot slutten.
La oss prøve med eksempler.
Eksempel
La oss rette hovedaksen fra venstre til høyre. I dette tilfellet vil tverraksen være rettet fra topp til bunn. La oss justere plasseringen av våre blokker både langs hovedaksen og tverraksen.
Langs hovedaksen presser vi blokkene mot starten,
altså mot venstre kant. For å gjøre dette setter vi justify-content
til verdien flex-start. Langs
tverraksen presser vi også blokkene mot starten,
altså mot toppen. For å gjøre dette setter vi align-items
også til verdien flex-start.
La oss se hva vi får:
.parent {
display: flex;
flex-direction: row; /* hovedaksen til høyre, tverraksen nedover */
justify-content: flex-start; /* blokker til starten av hovedaksen */
align-items: flex-start; /* blokker til starten av tverraksen */
}
Resultat av kjøring av kode:
Eksempel
La oss nå presse blokkene mot slutten av tverraksen,
altså mot bunnen. For å gjøre dette setter vi align-items
til verdien flex-end:
.parent {
display: flex;
flex-direction: row; /* hovedaksen til høyre, tverraksen nedover */
justify-content: flex-start; /* blokker til starten av hovedaksen */
align-items: flex-end; /* blokker til slutten av tverraksen */
}
Resultat av kjøring av kode:
Eksempel
La oss nå rette hovedaksen fra topp til bunn. Siden hovedaksen er vertikal, vil tverraksen være rettet fra høyre til venstre. La oss presse blokkene langs begge akser mot deres start:
.parent {
display: flex;
flex-direction: column; /* hovedaksen nedover, tverraksen til høyre */
justify-content: flex-start; /* blokker til starten av hovedaksen */
align-items: flex-start; /* blokker til starten av tverraksen */
}
Resultat av kjøring av kode:
Eksempel
Og nå langs tverraksen presser vi blokkene mot slutten:
.parent {
display: flex;
flex-direction: column; /* hovedaksen nedover, tverraksen til høyre */
justify-content: flex-start; /* blokker til starten av hovedaksen */
align-items: flex-end; /* blokker til slutten av tverraksen */
}
Resultat av kjøring av kode:
Eksempel
La oss presse blokkene mot slutten av begge akser:
.parent {
display: flex;
flex-direction: column; /* hovedaksen nedover, tverraksen til høyre */
justify-content: flex-end; /* blokker til slutten av hovedaksen */
align-items: flex-end; /* blokker til slutten av tverraksen */
}
Resultat av kjøring av kode:
Eksempel
La oss endre retningen på hovedaksen - la oss rette den fra bunn til topp. Samtidig vil ikke tverraksen endre sin retning, fordi hovedaksen fortsatt er vertikal.
La oss presse blokkene mot starten av begge akser:
.parent {
display: flex;
flex-direction: column-reverse; /* hovedaksen oppover, tverraksen til høyre */
justify-content: flex-start; /* blokker til starten av hovedaksen */
align-items: flex-start; /* blokker til starten av tverraksen */
}
Resultat av kjøring av kode:
