Flexbox Layout

Insieme di classi css per la realizzazione veloce e pratica di layout con pattern felxbox

// API dBJs-ui

Davide Bausach / 18-05-2015

Il Flexbox Pattern della libreria dBJs-ui è un'insieme di classi che permettono di applicare in modo facile e veloce le strutture di layout sfruttabili con queste nuove regole CSS3.

Le classi suddette di dividono in due tipogie, quelle che agiscono sul container e quelle che agiscondo sugli elementi da esso contenuti, gli item.

Nei seguenti esempi il div di colore rosso è il primo nel codice html, il giallo è il secondo e il verde è il terzo;

Container

Example 1 - flex or flex row

Allinea i div lateralmente dando ad ogniuno di essi un peso di 1 su 3 (grow-1 proprietà item). È possibile usare anche solo la classe flex o entrambe flex row.

    <div class="flex row">
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
    </div>

Example 2 - flex-wrap (all div width)

Allinea i div lateralmente dando ad ogniuno di essi un peso di 1 su 3 (grow-1 proprietà item). Dando grow-1 a tutti gli elementi contenuti dovremmo avere un risultato di 6 div allienati, con la classe flex-wrap però possiamo dare una min-width ad ogni div contenuto facendo in modo che alla fine dei contenitore questi vadano a capo ottenendo così un layout a griglia. Nell'esempio seguente ho dato come min-width, ai div all'interno dei container, un valore di 33.33% per ottenere tre colonne.

    <div class="flex-wrap">
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
    </div>

Example 3 - flex row-reverse

Allinea i div lateralmente dando ad ogniuno di essi un peso di 1 su 3 (grow-1 proprietà item) invertendo l'ordine nel browser rispetto all'ordine di scrittura nel codice html.

    <div class="flex row-reverse">
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
    </div>

Example 4 - flex column

Allinea i div in colonna dando ad ogniuno di essi un peso di 1 su 3 (grow-1 proprietà item).

    <div class="flex column">
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
    </div>

Example 5 - flex column-reverse

Allinea i div in colonna dando ad ogniuno di essi un peso di 1 su 3 (grow-1 proprietà item) invertendo l'ordine nel browser rispetto all'ordine di scrittura nel codice html.

    <div class="flex column-reverse">
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
      <div class="item grow-1"></div>
    </div>

Example 6 - flex justify-start (no item / all div width)

Allinea i div lateralmente giustificandoli a sinistra; per far si che funzionino tali classi è necessario che i div contenuti nel container non abbiano ne la classe item ne grow-... ma abbiano una larghezza definita.

    <div class="flex justify-start">
      <div class="myitem_width"></div>
      <div class="myitem_width"></div>
      <div class="myitem_width"></div>
    </div>

Example 7 - flex justify-end (no item / all div width)

Allinea i div lateralmente giustificandoli a destra; per far si che funzionino tali classi è necessario che i div contenuti nel container non abbiano ne la classe item ne grow-... ma abbiano una larghezza definita.

    <div class="flex justify-end">
      <div class="myitem_width"></div>
      <div class="myitem_width"></div>
      <div class="myitem_width"></div>
    </div>

Example 8 - flex justify-center (no item / all div width)

    <div class="flex justify-center">
      <div class="myitem_width"></div>
      <div class="myitem_width"></div>
      <div class="myitem_width"></div>
    </div>

Example 9 - flex justify-space-between (no item / all div width)

Allinea i div lateralmente giustificandoli per l'intero spazio del container; per far si che funzionino tali classi è necessario che i div contenuti nel container non abbiano ne la classe item ne grow-... ma abbiano una larghezza definita.

    <div class="flex justify-space-between">
      <div class="myitem_width"></div>
      <div class="myitem_width"></div>
      <div class="myitem_width"></div>
    </div>

Example 10 - flex justify-space-around (no item / all div width)

Allinea i div lateralmente giustificandoli per l'intero spazio del container in modo circolare; per far si che funzionino tali classi è necessario che i div contenuti nel container non abbiano ne la classe item ne grow-... ma abbiano una larghezza definita.

    <div class="flex justify-space-around">
      <div class="myitem_width"></div>
      <div class="myitem_width"></div>
      <div class="myitem_width"></div>
    </div>

Example 11 - flex align-items-start (all div height)

Allinea i div lateralmente giustificandoli verso l'alto dando ad ogniuno di essi un peso di 1 su 3 (grow-1 proprietà item); per far si che funzionino tali classi è necessario che i div contenuti nel container abbiano un'altezza definita.

    <div class="flex align-items-start">
      <div class="myitem_height item grow-1"></div>
      <div class="myitem_height item grow-1"></div>
      <div class="myitem_height item grow-1"></div>
    </div>

Example 12 - flex align-items-end (all div height)

Allinea i div lateralmente giustificandoli verso il basso dando ad ogniuno di essi un peso di 1 su 3 (grow-1 proprietà item); per far si che funzionino tali classi è necessario che i div contenuti nel container abbiano un'altezza definita.

    <div class="flex align-items-end">
      <div class="myitem_height item grow-1"></div>
      <div class="myitem_height item grow-1"></div>
      <div class="myitem_height item grow-1"></div>
    </div>

Example 13 - flex align-items-center (all div height)

    <div class="flex align-items-center">
      <div class="myitem_height item grow-1"></div>
      <div class="myitem_height item grow-1"></div>
      <div class="myitem_height item grow-1"></div>
    </div>

Items

Example 14 - item order-2 / order-3 / order-1 (max order 12)

Le classi order-... (da 1 a 12) permettono di decidere l'ordine di visualizzazione nel borowser rispetto alla scrittura nel codice html dei div item contenuti nel container.

    <div class="flex">
      <div class="item grow-1 order-2"></div>
      <div class="item grow-1 order-3"></div>
      <div class="item grow-1 order-1"></div>
    </div>

Example 15 - item align-self-start / align-self-center / align-self-end (all div height)

Le seguinti classi allineano i singoli item all'interno del container in altro, al centro o in basso; per far si che funzionino tali classi è necessario che i div contenuti nel container abbiano un'altezza definita.

    <div class="flex">
      <div class="myitem_height item grow-1 align-self-start"></div>
      <div class="myitem_height item grow-1 align-self-center"></div>
      <div class="myitem_height item grow-1 align-self-end"></div>
    </div>

Example 16 - item align-self-auto (div height) / align-self-stretch (no div height) / align-self-baseline (div height)

Dando alteza e allineamenti diversi agli items all'interno del container si pussono ottenre vari tipi di risultati come il seguente.

    <div class="flex">
      <div class="myitem_height item grow-1 align-self-auto"></div>
      <div class="item grow-1 align-self-stretch"></div>
      <div class="myitem_height item grow-1 align-self-baseline"></div>
    </div>

Example 17 - item grow-4 grow-8 grow-2 (max grow 12)

Le classi grow-... (da 1 a 12) permettono di decidere il peso di ogni singolo item facendogli occupare una frazione di spazio nel container pari al suo poso rapportato la somma dei pesi: nel seguente esempio il primo div occupa 3/13, il secondo 8/13 e il terzo 2/13.

    <div class="flex">
      <div class="item grow-3"></div>
      <div class="item grow-8"></div>
      <div class="item grow-2"></div>
    </div>

Responsive Layout

Per la realizzazione di layout responsive la libreria dBJs-ui comprende una serie di classi che permettono di avere un layout a griglia a 12 colonne con quattro media queries che permettono il controlle delle dimensioni dei box contenitori a varie risoluzioni.

La prima cosa da fare e definire un contenitore con classe flex-wrap. le celle della griglia devono avere classe item per essere considerate tali. Lo spazio occupato da ogni cella è definito dalle classi basis-* (da 1 a 12) che determinerà la porzione di spazio occupata dalla cella nel contenitore. Qualora si superino gli spazi disponibili l'ultima cella andrà a capo automaticamente.

La classi basis-* sono valide ad ogni dimensione di schermo fintanto che non vengano seguite dalle classi basis- relative alle media queries specificate:

basis-*-1280
basis-*-1024
basis-*-768
basis-*-480

Il carattere "*" va sempre sostituito con un numero da 1 a 12. Con le classi sopra elencate è possibile determinare lo spazio occupato nella griglia dalla cella fino ad ogni dimensione di schermo specificata:

Example 18 - item basis-*

In questo esempio si può vedere quanto detto prima e notare, restringendo la finestra del browser, che al di sopra dei 1280px di larghezza le celle occuperanno rispettivamente 3/12, 6/12 e 3/12; mentre al di sotto dei 1280px e al di sotto dei 1024 le celle occuperanno 4/12 ogniuna; ancora al di sotto dei 768px le celle occuperanno 6/12, 6/12 e 12/12; infine al di sotto deki 480px ogniuna occuperà 12/12.

Questo sistema permette di controlalre lo spazio occupato dalle celle ad ogni dimensione di media queries. Qualor anon vengano specificate alcune classi di dimensioni ovviamente sarà valida la classe basis-* più alta impostata.

    <div class="flex-wrap">
      <div class="item basis-3 basis-4-1280 basis-4-1024 basis-6-768 basis-12-480"></div>
      <div class="item basis-6 basis-4-1280 basis-4-1024 basis-6-768 basis-12-480"></div>
      <div class="item basis-3 basis-4-1280 basis-4-1024 basis-12-768 basis-12-480"></div>
    </div>

Un ulteriore aiuto per il posizionamento degli elementi della grigia ci viene dato dalle classi offset-* (da 0 a 11, lo 0 annull aun offset impostato ad una precedente dimensione) che ci permettono di spostare da sinistra verso destra una cella degli spazi indicati. Anche in questo caso gli offset possono essere variati a dimensioni diverse dello schermo.

offset-*-1280
offset-*-1024
offset-*-768
offset-*-480

Example 19 - item basis-* offset-*

Come si nota dall'esempio la cella coppupa 4/12 ed è spostata a destra di 4 posizioni, quindi esattamente centrata ma scendendo al di sotot dei 768px viene spostata di 8 posizioni.

    <div class="flex-wrap">
      <div class="item basis-4 offset-4 offset-8-768"></div>
    </div>

Sono disponibili anche una serie di classi per l'allineamento degli Items, tali classi vanno applicate al div contenitore con flex-wrap e sono utilizzabili per le varie media queries (*-1280, *-1024, *-768, *-480):

justify-start
justify-center
justify-end
justify-space-between
justify-space-around

Altre classi utili allo scopo del responsive sono visible e hidden. Queste classi impostate alle dimensioni prescelte permettono di mostrare o nasconder euna cella alla dimensione di schermo stabilita

visible-1280
visible-1024
visible-768
visible-480
hidden-1280
hidden-1024
hidden-768
hidden-480

A questo link un esempio di layout più corposo per rendersi conto delle potenzialità delle classi descritte.