CSS Flexbox. Proprietățiile containerului flex. Proprietatea flex-direction. Valoarea column. Valoarea column-reverse. Valoarea row. Valoarea row-reverse.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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;
}