CSS Flexbox. Proprietățiile containerului flex. Proprietatea flex-direction. Valoarea column. Valoarea column-reverse. Valoarea row. Valoarea row-reverse.

Susține Lectii-Virtuale!

Proprietățiile containerului flex 

Proprietățiile containerului flex sunt:
 

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Proprietatea flex-direction

Proprietatea flex-direction definește în ce direcție containerul dorește să stiveze elementele flex.

 "flex-direction: column;" stivuiește elementele flexate vertical (de sus în jos):



Exemplu:

Valoarea column stochează vertical elementele flex (de sus în jos):

.flex-container {
  display: flex;
  flex-direction: column;
}

Exemplu:

Valoarea column-reverse stochează vertical elementele flex (dar de jos în sus):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Exemplu:

Valoarea row stochează elementele flexate pe orizontală (de la stânga la dreapta):

.flex-container {
  display: flex;
  flex-direction: row;
}

Exemplu:

Valoarea row-reverse stochează elementele flexate pe orizontală (dar de la dreapta la stânga):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}