FLA: un HTML helper per CSS3 flexbox

FLA (Flex Layout Attribute) è un layout helper, si tratta sostanzialmente di una soluzione basata sulle specifiche CSS flexbox e concepita per disporre velocemente di shorthand flexbox tramite due attributi HTML: layout e self. Il progetto consente di effettuare rapide operazioni di prototipazione, per utilizzarlo è infatti sufficiente un browser Web, senza la necessità di ricorrere a codice CSS addizionale.

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