CSS Flexbox. Proprietatea align-content. Valoarea space-between. Valoarea space-around. Valoarea stretch. Valoarea center. Valoarea flex-start. Valoarea flex-end.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Proprietatea align-content este utilizată pentru a alinia liniile flex.
În aceste exemple, utilizăm un container înalt de 600 de pixeli, cu proprietatea flex-wrap setată pentru a wrapa, pentru a demonstra mai bine proprietatea align-content.
Exemplu:
Valoarea space-between afișează liniile flexate cu spațiu egal între ele:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Exemplu:
Valoarea space-around afișează liniile flexate cu spațiu înainte, între și după ele:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Exemplu:
Valoarea stretch întinde liniile flex pentru a ocupa spațiul rămas (acesta este implicit):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Exemplu:
Valoarea center afișează liniile de flexare din mijlocul containerului:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Exemplu:
Valoarea flex-start afișează liniile flex la începutul containerului:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Exemplu:
Valoarea flex-end afișează liniile de flex la sfârșitul containerului:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}