Diario CSS FlexBox

lunedì, 26 Mar 2018 - Percorso CSS

Fonte ufficiale: https://www.w3.org/TR/css-flexbox

Flexbox è un CSS box model in cui gli elementi figli di un contenitore flex possono essere disposti in qualsiasi direzione e le loro dimensioni possono adattarsi crescendo se c’è spazio libero rimanente o diminuendo se non c’è sufficiente spazio libero al fine di non uscire (overflow) dal contenitore padre.

Lo si studia in 2 giorni, poi non resta che esercitarsi su innumerevoli casistiche.

Flexbox si aggiunge ai quattro CSS layout model definiti in CSS 2.1, nei quali si definiscono dimensioni e posizione dei contenitori in base alla loro relazione coi contenitori padri (ancestor) e fratelli (sibling):

  • block layout, per il layout dei documenti
  • inline layout, per il layout dei testi
  • table layout, per il layout 2D di dati in formato tabellare
  • positioned layout, progettato per posizionare i contenitori esplicitamente e senza vincoli con gli altri elementi del documento

I contenuti figli (flex item) di un contenitore flex possono:

  • essere disposti verso ogni direzione : sinistra, destra, alto, basso
  • essere visualizzati in ordine inverso o ri-arrangiato senza incidere sulla struttura del documento e sui dispositivi diversi dai display (esempio: speech reader)
  • essere disposti lungo un solo asse principale (main) o divisi in più righe disposte lungo un asse secondario (cross)
  • aumentare o diminuire le loro dimensioni in base allo spazio libero
  • essere allineati rispetto al loro contenitore o rispetto l’un l’altro sull’asse secondario
  • collassare o de-collassare lungo l’asse principale mantenendo la dimensione dell’asse secondario

Contenitori Flex

display: flex

Genera un contenitore block-level flex.

display: inline-flex

Genera un contenitore inline-level flex.

Note sui contenitori flex :

  • float e clear non hanno effetto sui flex item e non generano elementi fuori dal flusso html
  • vertical-align non ha effetto sui flex item
  • ::first-line e ::first-letter pseudo-elements non si applicano ai flex container
  • la proprietà overflow si applica anche ai flex container

Flex Flow Direction

flex-direction : row | row-reverse | column | column-reverse

Specifica come gli elementi saranno posizionati nel contenitore, indica la direzione dell’asse principale.

Flex Line Wrapping –> multi-line

flex-wrap : nowrap | wrap | wrap-reverse

Specifica se gli elementi possono andare a capo e la direzione dell’asse secondario.

Lavora sulla singola riga.

Ogni riga sarà indipendente: le proprietà justify-content e align-self, che sono descritte più avanti, lavoreranno sulla singola riga.

flex-flow shorthand

flex-flow : <flex-direction> || <flex-wrap>

Display Order

La proprietà order può cambiare l’ordine degli elementi all’interno del contenitore padre, non cambia l’ordine strutturale del documento per cui non influisce sui dispositivi senza display.

*-reverse e order

ATTENZIONE: nel codice si dovrebbe evitare l’uso di -reverse e order per correggere l’ordine della struttura del documento ed utilizzarlo solo per motivi estetici, in questo modo non si interferisce con l’accessibilità

Elementi Flex

Note sugli elementi flex :

  • sono a loro volta contenitori flex-level e non block-level
  • i margini e i padding dei flex item non collassano
  • visibility: collapse permette di collassare gli elementi senza incidere sulla dimensione dell’asse secondario (che quindi rimane fissa)

flex-row

flex-row determina come la dimensione dell’elemento crescerà in presenza di spazio libero nel contenitore padre rispetto agli altri elementi flex

flex-shrink

flex-shrink determina come la dimensione dell’elemento diminuirà in assenza di spazio libero nel contenitore padre rispetto agli altri elementi flex per evitare l’overflow

flex-basis

flex-basis determina la dimensione iniziale dell’elemento flex

flex Shorthand

flex : [ <‘flex-grow’> <‘flex-shrink’> <‘flex-basis’>

flex: initial
diventa  flex: 0 1 auto

flex: auto
diventa flex: 1 1 auto

flex: none
diventa flex: 0 0 auto

flex: <positive-number>
diventa flex: <positive-number> 1 0

ATTENZIONE: nel codice si dovrebbe preferire l’uso della forma shorthand in quanto resetta correttamente qualsiasi componente non specificato per conformarsi ai layout maggiormente utilizzzati

% margini padding

ATTENZIONE: nel codice si dovrebbe evitare l’uso delle % per margini e padding dei flex item perché i diversi browser li possono interpretare in modo differente

Alignment

Quando la dimensione di tutti gli elementi è stata calcolata viene eseguito l’allineamento.

Se lo spazio disponibile è distribuito con margini auto gli altri allineamenti non avranno effetto.

Esempio: un header con un menu a sinistra e un login a destra

Main Axis Alignment

justify-content : flex-start | flex-end | center | space-between | space-around

Gli elementi vengono distribuiti lungo l’asse principale.

Cross Axis Alignment

align-items : flex-start | flex-end | center | baseline | stretch

Gli elementi vengono distribuiti lungo l’asse secondario.

align-self : auto | flex-start | flex-end | center | baseline | stretch

Permette di sovrascrivere l’allineamento per un singolo elemento flex.

auto
eredita dal contenitore padre

flex-start

flex-end

center
centrato sull’asse secondario

baseline

stretch

Packing Flex Lines

align-content : flex-start | flex-end | center | space-between | space-around | stretch

Allinea le linee nel contenitore padre lungo l’asse secondario.

Non ha effetto su una singola linea.

Flex Layout Algorithm – sezione 9

La sezione 9 riguarda chi implementa gli user-agent (come i browser).

Riferimenti

Molti testi sono la sintesi della traduzione di pezzi di testo della documentazione ufficiale: https://www.w3.org/TR/css-flexbox