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.

Proprietatea flex-flow

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