Flexbox per le pagine Web

Flexbox è un nuovo di tipo di layout in CSS3. L’utilizzo di questo tipo di layout assicura che gli elementi di comportino come vogliamo quando la pagina di deve adattare a differenti dimensioni dello schermo.

Le caratteristiche di Flebox

Il layout Flexbox si prefigge lo scopo di migliorare il modo di allineare e distribuire i contenuti di vari componenti all’interno della page web soprattuto quando, come nello scenario responsive attuale, non conosciamo a priori che tipo di schermo visualizzerà la nostra pagina e da qui in nome Flex, vale a dire flessibile e dinamico.

L’idea principale è che si deve dare al container principale l’abilità per alterare la dimensioni dei vari elementi ( altezza/larghezza) per sfruttare al massimo lo spazio messo a disposizione dallo schermo. In buona sostanza un container flex allarga gli elementi per riempire lo spazio o li stringe per evitare l’overflow.

L’aspetto più importante è che il layout flexbox non risente della direzione come il classico layout a blocchi che è o verticale o orizzontale e viene affetto da possibile problemi, per es. quando si ruota un tablet.

Questo layout è l’ideale per visualizzare le componenti di una Web Application.

Terminologia

Iniziamo con indicare che con flexbox si intende non una proprietà ma un vero e proprio modulo che contiene una serie di proprietà differenti: alcune di queste per configurare il “parent element” ( il flex container), altre invece per configurare i “children” ( i flex item).

Il layout flexbox è basato su direzioni flex-flow a differenza delle classiche block e inline. L’immagine sotto ( Flex Container by Mozilla Contributors nell’articolo Advanced Layout with Flexbox è sotto licenza CC-BY-SA 2.5) illustra bene il concetto.

Semplicemente gli elementi vengono sistemati o su main axis ( dal main-start al main-end) oppure sul cross axis (dal cross-start al cross-end):

• main axis – è l’asse primario sul quale i flex items si sistemano. Non è necessariamente orizzontale ma dipende dalla proprietà flex-direction.
• main-start | main-end – i flex items seguono la sistemazione dall’inizio ( main-start) alla fine ( main-end).
• main size – è la dimensione del flex items all’interno della dimensione main, può essere altezza o larghezza ma comunque relativa alla dimensione main.
• cross axis – è l’asse perpendicolare all’asse main. La sua direzione dipende dal main.
• cross-start | cross-end – Le linee flex sono riempite di elementi partendo dall’inizio ( cross-start) e muovendosi verso la fine (cross-end).
• cross size – è la dimensione del flex item ( altezza o larghezza) all’interno della dimensione cross.

Questo argomento è parte del Corso Web Design Avanzato. Contattaci subito per maggiori informazioni.