justify-content

La proprietà justify-content definisce l’allineamento lungo l’asse principale.

L’asse principale è orizzontale per la direzione row e verticale per la direzione column.

Accetta sei valori:

• flex-start - allinea gli elementi all’inizio del contenitore.
• flex-end - allinea gli elementi alla fine del contenitore.
• center - allinea gli elementi al centro del contenitore.
• space-between - gli elementi sono distribuiti uniformemente lungo l’asse. Il primo elemento è all’inizio, l’ultimo alla fine.
• space-around - gli elementi sono distribuiti uniformemente lungo l’asse, con uno spazio uguale intorno a ciascuno.
• space-evenly - gli elementi sono distribuiti in modo che la spaziatura tra due elementi qualsiasi (e lo spazio dai bordi) sia uguale.

Il valore predefinito di un contenitore flex è flex-start.

Esempio,

.container {
  display: flex;
  justify-content: flex-end;
}