Costruiamo un layout a griglia completo, per Web e mobile. Un esempio pratico che ci aiuterà a riprendere e fissare alcuni dei concetti già esplorati nel corso della guida.

Con il flexbox, forse per la prima volta nella storia dei CSS, abbiamo a disposizione uno strumento esplicitamente pensato per la strutturazione del layout.

Una carrellata di esempi per comprendere in pratica il significato delle regole flexbox. Utili a realizzare layout o componenti.

Creare il classico layout mobile con interamente con il flexbox, con header e un footer ad altezza fissa e una parte centrale flessibile

Realizzare layout di form o di singoli componenti che possano adattarsi ed essere riutilizzati in scenari differenti.

Flexbox è ideale per layout basati su elementi ripetuti disposti su più righe come gallerie di immagini, schede di prodotti e soprattutto per il mobile.

Flexbox, guida pratica
  • 20 lezioni
  • Facile

Flexbox. Una guida dedicata alla 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. Scopriamo come implementare interfacce utente con CSS Flexbox e analizziamo un esempio pratico completo di codice incentrato sulla realizzazione di un Grid Layout per il nostro sito Internet

Con flexbox affiancare colonne della stessa altezza diventa più immediato, non più una soluzione basata su hack ma fondata sulle funzionalità native dei CSS