justify-content: flex-start, center, space-between, space-around, space-evenly

Ora che abbiamo il nostro Flex Container e abbiamo scelto una direzione con flex-direction, ci troviamo spesso con dello spazio vuoto avanzato.

La proprietà justify-content (applicata sempre al genitore) decide come distribuire gli elementi e lo spazio vuoto lungo il main axis (asse principale).

Se sei in flex-direction: row (il default), justify-content muoverà gli oggetti orizzontalmente (destra-sinistra).

Ecco i 6 valori principali che userai ogni giorno:

Allineamento agli estremi e al centro

Supponiamo di avere tre bottoni in una barra larga.

flex-start (Default)

Spinge tutti gli elementi all’inizio dell’asse principale. Niente spazio tra di loro. In row: tutti a sinistra.

.barra {
  display: flex;
  justify-content: flex-start;
}

flex-end

Spinge tutti gli elementi alla fine dell’asse principale. In row: tutti a destra. Perfetto per spingere i pulsanti “Salva” e “Annulla” a fine form.

center

Raduna tutti gli elementi al centro esatto, lasciando lo spazio vuoto in egual misura a destra e a sinistra.

.eroe {
  display: flex;
  justify-content: center; /* Centra il contenuto orizzontalmente! */
}

Distribuzione intelligente dello spazio

Flexbox brilla davvero quando si tratta di dividere lo spazio vuoto tra gli elementi.

space-between (Il più usato)

Prende il primo elemento e lo porta all’estrema sinistra. Prende l’ultimo e lo porta all’estrema destra. Poi divide lo spazio rimanente in parti uguali tra gli elementi intermedi. Perfetto per l’header del sito: Logo a sinistra, Menu a destra.

.header {
  display: flex;
  justify-content: space-between;
}

space-around

Mette dello spazio uguale a destra e a sinistra di ogni elemento. Attenzione però: visivamente, lo spazio tra due elementi vicini sarà il doppio rispetto allo spazio tra il primo elemento e il bordo del contenitore (perché i loro spazi si sommano).

space-evenly

Divide tutto lo spazio vuoto in segmenti esattamente identici e li inserisce tra ogni elemento e tra gli elementi e i bordi del contenitore. Distribuzione perfettamente omogenea.

E se cambi flex-direction?

Ricorda la regola d’oro della lezione precedente. Se imposti il contenitore a flex-direction: column, l’Asse Principale diventa verticale. Di conseguenza, justify-content: center smetterà di centrare le cose orizzontalmente, e inizierà a centrarle verticalmente dall’alto verso il basso!