CSS Flexbox

Oggi parleremo di una feature css sbarcata da poco sui moderni browser funzionalità tutt’ora in fase di sua ultimazione: i layout CSS Flexbox.
Con il CSS Flexbox riusciremo a mettere da parte librerie CSS come Bootstrap, MaterializeCSS, ecc.. tornando al nostro caro codice css.

Cosa si prepone di fare il layout flexbox?

Il flexbox desidera eliminare i posizionamenti degli elementi all’interno di div flottati, eliminare i layout a modi griglie dei display:table ed i grid layouts, nonché i posizionamenti assoluti, i div di bootstrap 3 che non gestiscono gli overflow che per poter realizzare tre colonne della stessa altezza bisogna penare (anche se la beta di Bootstrap 4 che a breve sarà rilascia utilizzerà il flexbox), i position fixed, ecc… allo scopo di creare box all’interno di un layout dove ognuno deve occupare esattamente la posizione di cui necessita per essere renderizzato in maniera ottimale dal browser.
Fantascienza del CSS? No, semplice evoluzione dei display:table che però al contrario peccano nel resize della pagina del browser restando troppo ancorati allo spazio a loro dedicato.
Ancora non vi è chiaro perché adottare questo design nella pianificazione dei layout di pagina ora vi due vere motivazioni, per farvi comprendere l’importanza del motto del flexbox, ossia ogni elemento desidera prendere lo spazio che lui merita 🙂

1) Supponiamo di avere del testo come in questa mock-up dove una descrizione può essere infinitamente lunga e vogliamo ci sia un scrollbar che non faccia in modo che la finestra sia infinita.

Column Flexbox

Problematica del flexbox sul testo lungo

Voi direte ma che ci vuole mettiamo una max-height al contenitore del testo 😉 Risposta errata! Perché ciò è un parametro fisso se ridimensiono la finestra ed ho settato tale altezza a 100px incombere in questa spiacevole situazione dove rimane molto spazio bianco nella finestra 🙂

Flexbox Height Issue

Problema dell’altezza fissa degli elementi

E potrete fare tonnellate su tonnellate di media query ma la soluzione ottimale potrebbe sfuggirvi di mano.
Questo problema è risolto dal layout css flexbox sulle colonne che discuteremo più in avanti.

2) Sempre dall’esempio precedente supponiamo di avere nel layout anche un immagine floattata a sinistra 🙂 Questo è il risultato 🙂

Flexbox Fix

Problema div flottati

Carino perchè ho proporzionato tutto dando al float di sinistra con l’immagine una dimensione del 30% del layout e alla sezione con il testo il 70%, oltre al fatto che l’immagine è 350 di larghezza e 650 di altezza ma che succede se al posto di quella immagine metto una di 300×300 😉 Questo è il risultato 🙂

Flexbox column resize elements

Problema spazio vuoto in div flottato

Ma quanto spazio bianco sotto l’immagine inoltre come faccio per avere qualcosa che copra tutte le possibili risoluzione dell’immagine e fare in modo che non sia stretchata, allungata, o abbia dimensioni fisse ecc.. l’unica soluzione per ottenere l’immagine flessibile è adottare i css flexbox.

Il flexbox fa il modo che l’immagine si ridimensioni in base all’altezza o alla larghezza del suo contenitore, tutto ciò senza nemmeno una riga di Javascript, tutto puro CSS 🙂

Ora prima di passare a vedere come risolvere ciò con il css facciamo un pò teoria e vi linko anche la tabella dei supporti del flexbox, che come vedete è supportato dalla stragrande maggioranza dei moderni browser web e mobile 🙂

Supporto dei browser al layout flexbox

Flexbox Browser Support

Il sistema è fondato su due elementi costitutivi:

  • Il flex container, elemento che contiene a sua volta i box flessibili che siano columns o rows e viene creato usando la regola display:flex;
  • I flex items, figli del contenitore che si ridimensionano in base a quanto loro spetta.

Di seguito trovate i links che descrivono come agire sul CSS Flexbox container e sui singoli items, anche chiamati CSS Flexbox Childs. Buona lettura 🙂
https://www.gianlucadivincenzo.it/css/css-flexbox-container/
https://www.gianlucadivincenzo.it/php/css-flexbox-childs/

CSS Flexbox ultima modidfica: 2017-11-20T21:54:19+01:00 da Gianluca Di Vincenzo
Posted in: CSS

By on 20 Novembre 2017

Tagged: , , ,