Flexbox, guida pratica

19 ottobre 2016

La sintassi, gli strumenti e le tecniche per realizzare layout o componenti web e mobile sfruttando la specifica dei Flexible Box, giunta ad una versione matura e largamente supportata.

Flexbox, i fondamentali

  1. 1. Introduzione a Flexbox
    Flexbox rivoluziona il modo di strutturare i layout di applicazioni...
  2. 2. CSS Flexbox, i principi di base
    Con il flexbox, forse per la prima volta nella storia dei CSS,...
  3. 3. CSS Flexbox per esempi
    Una carrellata di esempi per comprendere in pratica il significato...

CSS Flexbox, soluzioni per componenti

  1. 4. Centrare elementi flessibili
    Flexbox si rivela ideale per la centratura di elementi all'interno di...
  2. 5. Creare un menu di navigazione orizzontale
    Manipolare elementi flessibili intervenendo solo sul contenitore. Un...
  3. 6. Mobile, menu e item flessibili
    Flexbox si rivela perfettamente adeguato in strategie di adattamento...
  4. 7. Allineare elementi flessibili con i margini automatici
    Sfruttare la gestione dei margini automatici di flexbox, tra le più...
  5. 8. Uno slideshow responsive con flexbox
    Creiamo una galleria con immagini che si alternano con transizioni in...

Layout con CSS Flexbox

  1. 9. Colonne affiancate con altezza uguale
    Con flexbox affiancare colonne della stessa altezza diventa più...
  2. 10. Layout a griglia con flexbox
    Flexbox è ideale per layout basati su elementi ripetuti disposti su...
  3. 11. Usare la width e ottimizzare per il mobile
    Definire la larghezza in modo tradizionale anche in contesti flexbox,...
  4. 12. Layout di form con flexbox
    Realizzare layout di form o di singoli componenti che possano...
  5. 13. Layout per il mobile con flexbox
    Creare il classico layout mobile con interamente con il flexbox, con...

Progetto: grid layout per Web e mobile

  1. 14. Tutorial: grid layout con Flexbox
    Costruiamo un layout a griglia completo, per Web e mobile. Un esempio...
  2. 15. Flexbox grid, disporre gli elementi nel container
    Applichiamo le modalità di disposizione degli elementi in un...
  3. 16. Flexbox grid responsive, le media query
    Un semplice layout a griglia con flexbox, che si adatta al mobile...
  4. 17. Flexbox Grid Layout con SASS e Compass: set-up
    Impostazioni di base di un progetto SASS/Compass per ottenere un...
  5. 18. Flexbox Grid Layout con SASS e Compass: il contenitore
    Costruiamo una griglia sfruttando il supporto che Compass ci offre...
  6. 19. Flexbox Grid Layout con SASS e Compass: i mixin
    Creiamo i mixin per fissare con un ciclo tutte le caratteristiche...
  1. 20. Flexbox Grid Layout con SASS e Compass: le media queries
    Impostare in SASS tutte le variabili con i valori dei break-point per...
Se vuoi aggiornamenti su Flexbox, guida pratica inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Flexbox, guida pratica

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy