Come Usare Flexbox – Guida CSS

flex-direction

Questa proprietà influisce sulla disposizione degli elementi all’interno del contenitore definendo l’asse principale.

.contenitore {
  flex-direction: row / row-reverse / column / column-reverse;
}

• row (predefinito): da sinistra verso destra.
• row-reverse: da destra verso sinistra.
• column: dall’alto verso il basso.
• column-reverse: dal basso verso l’alto.

flex-wrap

Gli elementi flex, di default, si adattano per entrare in una sola riga. Con la proprietà flex-wrap puoi modificare questo comportamento.

.contenitore {
  flex-wrap: nowrap / wrap / wrap-reverse;
}

• nowrap (predefinito): tutti gli elementi vengono predisposti su una riga.
• wrap: gli elementi vengono predisposti su più righe partendo dall’alto verso il basso.
• wrap-reverse: gli elementi vengono predisposti su più righe partendo dal basso verso l’alto.

flex-flow

Flex-flow è un sorta di abbreviazione che ti permette di settare due proprietà in una: flex-direction e flex-wrap. Il valore predefinito è row no-wrap.

.contenitore {
  flex-flow: row no-wrap;
}

justify-content

Definisce l’allineamento sull’asse principale distribuendo gli elementi in base al valore assegnato.

.contenitore {
  justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly;
}

• flex-start (predefinito): gli elementi partono dal punto iniziale in base alla proprietà flex-direction.
• flex-end: gli elementi partono dal punto finale in base alla proprietà flex-direction.
• center: gli elementi vengono centrati.
• space-between: gli elementi vengono distribuiti tenendo il primo elemento nel punto iniziale e l’ultimo elemento nella parte finale.
• space-around: gli elementi sono distribuiti uniformemente dividendo anche lo spazio a disposizione. Lo spazio tra ogni coppia di elementi adiacenti è identica. Lo spazio prima del primo elemento e lo spazio dopo l’ultimo elemento è la metà dello spazio tra le coppie.
• space-evenly: anche qui gli elementi sono distribuiti in modo tale da eguagliare lo spazio disponibile. Tuttavia, a differenza della proprietà space-around, lo spazio tra i bordi del contenitore e gli elementi esterni, è esattamente lo stesso degli spazi tra elementi adiacenti.

Esistono anche altri valori meno utilizzati per la proprietà justify-content. Se vuoi approfondire puoi leggere la documentazione di Mozilla Developer Network.

align-items

Questa proprietà desfinisce il comportamento degli elementi lungo l’asse trasversale.

.contenitore {
  align-items: stretch / flex-start / flex-end / center / baseline;
}

• stretch (predefinito): espande la dimensione degli elementi per riempire il contenitore (sempre rispettando i valori delle proprietà min-width o max-width).
• flex-start: gli elementi vengono disposti partendo dal punto iniziale dell’asse trasversale.
• flex-end: gli elementi vengono disposti partendo dal punto finale dell’asse trasversale.
• center: gli elementi vengono centrati sull’asse trasverlale.
• baseline: gli elementi vengono centrati in base alla posizione del testo.

Anche qui ci sono dei valori che non vengono utilizzati spesso. Consulta la documentazione di Mozilla Developer Network se vuoi approfondire.

align-content

Questa proprietà gestisce l’allineamento degli elementi sull’asse trasversale quando è presente spazio extra. Se è presente una sola linea, la proprietà non ha effetto.

.contenitore {
   align-content: normal / flex-start / flex-end / center / space-between / space-around / space-evenly / stretch ;
}

• normal (predefinito): le linee sono predisposte nella loro posizione predefinita.
• flex-start: le linee vengono predisposte all’inizio del contanitore.
• flex-end: le linee vengono predisposte alla fine del contenitore.
• center: le linee vengono posizionate al centro.
• space-between: le linee vengono distribuite in modo uniforme. La prima linea è al punto iniziale del container mentre l’ultima linea è nella parte finale.
• space-around: le linee vengono distribuite in modo uniforme con spazio identico tra ogni linea adiacente.
• stretch: le linee si adattano al contenitore per riempire tutti gli spazi.

Per approfondire la proprietà align-content ti lascio alla documentazione di Mozilla Developer Network.

order

Grazie alla proprietà order è possibile organizzare l’ordinamento dei vari elementi. Puoi assegnare anche valori negativi. Il valore di default è 0.

.elemento {
   order: 1 ;
}

flex-grow

Definisce la proporzione di crescita di un elemento rispetto agli altri.

Se, ad esempio, tutti gli elemento hanno come valore 1, lo spazio in eccesso del container viene distribuito equamente a tutti i box. Quando, invece, c’è un elemento con valore 2, quell’elemento prenderà il doppio dello spazio rimanente (se disponibile) rispetto agli altri che hanno valore 1.

.elemento {
   flex-grow: 2;
}

flex-shrink

Questa proprietà definisce l’abilità di un elemento di ridursi se necessario.

.elemento {
   flex-shrink: 2;
}

flex-basis

La dimensione di un elemento flex (prima della distribuzione dello spazio in eccesso) viene settata con la proprietà flex-basis. Il valore può essere una lunghezza in pixel, in percentuale, in rem e così via. Il valore auto si collega alla proprietà width o height dell’elemento . Il valore content adatta la dimensione al contenuto dell’elemento.

.elemento {
   flex-basis: 500px / content / auto;
}

flex

Si tratta di un’abbreviazione che permette di settare in modo combinato le proprietà flex-grow, flex-shrink e flex-basis.

.elemento {
   flex: none / 'flex-grow' 'flex-shrink' 'flex-basis';
}

align-self

Questa proprietà permette ad un elemento specifico di utilizzare un allineamento diverso rispetto agli altri. È molto simile a align-items. Infatti può assumere gli stessi valori.

.elemento {
   align-self: auto / flex-start / flex-end / center / baseline / stretch;
}