CSS Flexbox. Proprietatea flex-flow. Proprietățiile flex-direction și flex-wrap. Proprietatea justify-content. Valoarea center. Valoarea flex-start. Valoarea flex-end. Valoarea space-around. Valoarea space-between.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Proprietatea flex-flow este o proprietate shorthand pentru setarea proprietăților flex-direction și flex-wrap.
Exemplu:
.flex-container {
display: flex;
flex-flow: row wrap;
}
Proprietatea justify-content
Proprietatea justify-content este utilizată pentru alinierea elementelor flex:
Exemplu:
Valoarea center aliniază elementele flex în centrul containerului:
.flex-container {
display: flex;
justify-content: center;
}
Exemplu:
Valoarea flex-start aliniază elementele flex la începutul containerului (implicit):
.flex-container {
display: flex;
justify-content: flex-start;
}
Exemplu:
Valoarea flex-end aliniază elementele flex la sfârșitul containerului:
.flex-container {
display: flex;
justify-content: flex-end;
}
Exemplu:
Valoarea space-around afișează elementele flex cu spațiu înainte, între și după linii (before, between și after):
.flex-container {
display: flex;
justify-content: space-around;
}
Exemplu:
Valoarea space-between afișează elementele flexibile cu spațiu între linii:
.flex-container {
display: flex;
justify-content: space-between;
}