flex-direction în CSS

flex-direction: row;            /* implicit: orizontal, de la stânga la dreapta */
flex-direction: column;         /* vertical: de sus în jos */
flex-direction: row-reverse;    /* orizontal inversat */
flex-direction: column-reverse; /* vertical inversat */

Ce face flex-direction

flex-direction definește orientarea axei principale (main axis).

• row (implicit): elementele stau pe orizontală, în ordinea din codul HTML.
• column: elementele sunt așezate pe verticală, unul sub altul (esențial pe ecrane de telefon pentru a transforma meniurile orizontale în liste verticale).
• Variantele -reverse inversează sensul de curgere a elementelor.

Valori uzuale

Valoare	Descriere
row	Axa principală este orizontală (stânga -> dreapta).
column	Axa principală este verticală (sus -> jos).
row-reverse	Axa orizontală inversată (dreapta -> stânga).
column-reverse	Axa verticală inversată (jos -> sus).

Exemple

Exemplul 1: Comutarea dintr-un rând de desktop într-o coloană de mobil

La lățimi mici de ecran, flex-direction: column stochează elementele comod pe verticală.

.nav-grup {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
/* Pe telefon: */
@media (max-width: 600px) {
  .nav-grup {
    flex-direction: column;
  }
}

Efect vizual în browser

Pe desktop linkurile stau pe același rând; pe telefon coboară automat unul sub celălalt.

Greșeli frecvente

• Uitarea că atunci când schimbi direcția la column, rolul proprietăților justify-content și align-items se inversează (justify-content controlează acum verticala, iar align-items orizontala).

Comenzi înrudite

• display: flex: Transformă elementul într-un container flexibil; toți copiii direcți devin elemente flex așezate automat în linie.
• justify-content: Distribuie elementele și spațiul liber de-a lungul axei principale (orizontal când flex-direction este row).
• align-items: Aliniază elementele de-a lungul axei secundare / transversale (vertical când flex-direction este row).