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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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:

Sarcini practice