Alinierea elementelor flex pe axa principală în CSS
Proprietatea justify-content permite
alinierea elementelor pe axa principală. Anterior
ați învățat deja valorile center,
space-between, space-around,
space-evenly. Să studiem acum
încă câteva valori.
Valoarea flex-start aduce elementele la începutul
axei principale, iar valoarea flex-end - la sfârșit.
Să vedem exemplele.
Exemplu
Să direcționăm axa principală de la stânga la dreapta, setând
proprietății flex-direction valoarea row.
Să aducem blocurile la începutul axei. Pentru aceasta justify-content
îl setăm la valoarea flex-start:
.parent {
display: flex;
flex-direction: row; /* axa principală de la stânga la dreapta */
justify-content: flex-start; /* blocurile la începutul axei principale */
}
Rezultatul executării codului:
Exemplu
Acum să aducem blocurile la sfârșitul axei.
Pentru aceasta justify-content îl setăm
la valoarea flex-end:
.parent {
display: flex;
flex-direction: row; /* axa principală de la stânga la dreapta */
justify-content: flex-end; /* blocurile la sfârșitul axei principale */
}
Rezultatul executării codului:
Exemplu
Acum să direcționăm axa principală de la dreapta la stânga,
setând proprietății flex-direction valoarea
row-reverse. Să aducem blocurile la începutul
axei, adică la marginea dreaptă. Pentru aceasta justify-content
îl setăm la valoarea flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* axa principală de la dreapta la stânga */
justify-content: flex-start; /* blocurile la începutul axei principale */
}
Rezultatul executării codului:
Exemplu
Acum să aducem blocurile la sfârșitul axei principale,
adică la marginea stângă. Pentru aceasta justify-content
îl setăm la valoarea flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* axa principală de la dreapta la stânga */
justify-content: flex-end; /* blocurile la sfârșitul axei principale */
}
Rezultatul executării codului:
Exemplu
În exemplele precedente axa principală era direcționată orizontal. Acum să o răsturnăm și să o direcționăm vertical.
Să direcționăm axa principală în jos, setând
proprietății flex-direction valoarea
column.
Să aducem blocurile la începutul axei principale, adică
la marginea superioară. Pentru aceasta justify-content
îl setăm la valoarea flex-start:
.parent {
display: flex;
flex-direction: column; /* axa principală de sus în jos */
justify-content: flex-start; /* blocurile la începutul axei principale */
}
Rezultatul executării codului:
Exemplu
Acum să aducem blocurile la sfârșitul axei principale,
adică la marginea inferioară. Pentru aceasta justify-content
îl setăm la valoarea flex-end:
.parent {
display: flex;
flex-direction: column; /* axa principală de sus în jos */
justify-content: flex-end; /* blocurile la sfârșitul axei principale */
}
Rezultatul executării codului:
Exemplu
Să răsturnăm axa principală, direcționând-o de jos
în sus. Pentru aceasta proprietății flex-direction
îi dăm valoarea column-reverse. În
acest caz blocurile își vor schimba ordinea -
la începutul axei va sta ultimul bloc din
codul HTML.
Să aducem blocurile la începutul axei principale,
adică la marginea inferioară. Pentru aceasta justify-content
îl setăm la valoarea flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* axa principală de jos în sus */
justify-content: flex-start; /* blocurile la începutul axei principale */
}
Rezultatul executării codului:
Exemplu
Să aducem blocurile la sfârșitul axei principale,
adică la marginea superioară. Pentru aceasta justify-content
îl setăm la valoarea flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* axa principală de jos în sus */
justify-content: flex-end; /* blocurile la sfârșitul axei principale */
}
Rezultatul executării codului:
