In CSS3 flexbox (o Flexible Box) è una modalità di layout che definisce la collocazione degli elementi di pagina in modo tale che si comportino in modo prevedibile quando viene modificata la risoluzione o cambiato il display utilizzato. Parliamo di un box mode semplice da utilizzare ma che si basa su regole proprie, delle specifiche appunto, ecco quindi che uno strumento come FLA può risultare molto utile per incrementare la produttività e facilitare il lavoro del Web designer.

L'utilizzo della libreria è abbastanza semplice, FLA può essere scaricato dalla sua pagina ufficiale su GitHub, clonato dal suo repository Git o installato tramite npm; fatto questo si deve includere il foglio di stile del progetto nella propria pagina Web:

e aggiungere gli attributi di layout al markup HTML:

...

Il codice seguente mostra ad esempio la distribuzione degli elementi in una colonna suddivisa in 3 divbox e centrata sia orizzontalmente che verticalmente:

1
2
3

Nello stesso modo si possono centrare orizzontalmente tre divbox ma posizionarle nella parte alta della finestra di visualizzazione del browser:

1
2
3

La sintassi di FLA non presenta particolari complessità, si ricordi però come regola generale che i valori per la distribuzione verticale e orizzontale degli elementi devono essere connessi tramite un singolo dash ("-").

Via FLA

CommentaDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *