justify-content în CSS

justify-content: flex-start;    /* la început */
justify-content: center;        /* centrat */
justify-content: flex-end;      /* la final */
justify-content: space-between; /* lipite de margini, spațiu egal între ele */
justify-content: space-around;  /* spațiu egal în jurul fiecăruia */
justify-content: space-evenly;  /* spații perfect egale peste tot */

Ce face justify-content

justify-content controlează cum este împărțit spațiul alb rămas într-un rând.

Cea mai folosită valoare pe web este space-between: împinge primul element lipit de marginea din stânga (ex. logo-ul site-ului) și ultimul element lipit de marginea din dreapta (ex. butonul de contact sau meniul).

Valori uzuale

Valoare	Descriere
flex-start	Elementele sunt împinse la începutul axei (stânga).
center	Elementele sunt grupate compact pe mijloc.
flex-end	Elementele sunt împinse la final (dreapta).
space-between	Primul la stânga, ultimul la dreapta, spațiu egal între vecini.
space-around	Fiecare element are spațiu egal pe ambele laturi.
space-evenly	Distanța dintre oricare două elemente și până la margini este strict identică.

Exemple

Exemplul 1: Bara clasică de antet (Navbar) cu spațiere la extremități

space-between separă automat sigla de butoanele de navigare.

header.bara-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

Efect vizual în browser

Sigla stă lipită frumos în stânga, iar linkurile de cont și meniul stau aliniate la marginea din dreapta.

Greșeli frecvente

• Folosirea de margini mari manuale (margin-right: 500px) pentru a împinge elementele la capete; justify-content: space-between rezolvă asta fluid și automat.

Comenzi înrudite

• align-items: Aliniază elementele de-a lungul axei secundare / transversale (vertical când flex-direction este row).
• display: flex: Transformă elementul într-un container flexibil; toți copiii direcți devin elemente flex așezate automat în linie.
• gap (row-gap, column-gap): Setează distanța dintre elementele copil dintr-un container Flexbox sau Grid, fără a adăuga spațiu la margini.