CSS Flexbox. Proprietatea align-content. Valoarea space-between. Valoarea space-around. Valoarea stretch. Valoarea center. Valoarea flex-start. Valoarea flex-end.

Proprietatea align-content

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;
}