Alinierea elementelor flex pe axa transversală în CSS
Să aliniem acum elementele și
pe axa transversală. Alinierea pe această axă
este stabilită de proprietatea align-items. Valoarea
flex-start aduce elementele la începutul
axei, iar valoarea flex-end - la sfârșit.
Să încercăm cu exemple.
Exemplul
Să direcționăm axa principală de la stânga la dreapta. În acest caz, axa transversală va fi direcționată de sus în jos. Să reglam poziționarea elementelor noastre atât pe axa principală, cât și pe axa transversală.
Pe axa principală să aducem elementele la începutul ei,
adică la marginea stângă. Pentru aceasta, justify-content
îl setăm la valoarea flex-start. Pe
axa transversală, de asemenea, să aducem elementele la începutul ei,
adică la marginea superioară. Pentru aceasta, align-items
de asemenea, îl setăm la valoarea flex-start.
Să vedem ce obținem:
.parent {
display: flex;
flex-direction: row; /* axa principală la dreapta, axa transversală în jos */
justify-content: flex-start; /* elementele la începutul axei principale */
align-items: flex-start; /* elementele la începutul axei transversale */
}
Rezultatul executării codului:
Exemplul
Să aducem acum elementele la sfârșitul axei transversale,
adică la partea de jos. Pentru aceasta, align-items
îl setăm la valoarea flex-end:
.parent {
display: flex;
flex-direction: row; /* axa principală la dreapta, axa transversală în jos */
justify-content: flex-start; /* elementele la începutul axei principale */
align-items: flex-end; /* elementele la sfârșitul axei transversale */
}
Rezultatul executării codului:
Exemplul
Să direcționăm acum axa principală de sus în jos. Deoarece axa principală este verticală, axa transversală va fi direcționată de la dreapta la stânga. Să aducem elementele pe ambele axe la începutul lor:
.parent {
display: flex;
flex-direction: column; /* axa principală în jos, axa transversală la dreapta */
justify-content: flex-start; /* elementele la începutul axei principale */
align-items: flex-start; /* elementele la începutul axei transversale */
}
Rezultatul executării codului:
Exemplul
Iar acum pe axa transversală să aducem elementele la sfârșitul ei:
.parent {
display: flex;
flex-direction: column; /* axa principală în jos, axa transversală la dreapta */
justify-content: flex-start; /* elementele la începutul axei principale */
align-items: flex-end; /* elementele la sfârșitul axei transversale */
}
Rezultatul executării codului:
Exemplul
Să aducem elementele la sfârșitul ambelor axe:
.parent {
display: flex;
flex-direction: column; /* axa principală în jos, axa transversală la dreapta */
justify-content: flex-end; /* elementele la sfârșitul axei principale */
align-items: flex-end; /* elementele la sfârșitul axei transversale */
}
Rezultatul executării codului:
Exemplul
Să schimbăm direcția axei principale - să o direcționăm de jos în sus. În acest caz, axa transversală nu își va schimba direcția, deoarece axa principală rămâne verticală.
Să aducem elementele la începutul ambelor axe:
.parent {
display: flex;
flex-direction: column-reverse; /* axa principală în sus, axa transversală la dreapta */
justify-content: flex-start; /* elementele la începutul axei principale */
align-items: flex-start; /* elementele la începutul axei transversale */
}
Rezultatul executării codului:
