Back to top

Flexbox per le pagine Web

Ideale per visualizzare componenti di Web Application

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.

CONTATTI

Scrivici dal form di contatto

Tel +39 06 87811067
Fax +39 06 99335373

Mail: info@glue-labs.com
Pec: gluelabs@legalmail.it

Dove Siamo
Roma: Piazza Don Sturzo 15
Padova: Via Savonarola 217
Milano: Viale Monza 345
Torino: Via Nizza 262

Nome*

E-mail*

Telefono(per un contatto più rapido)

Come possiamo aiutarti?

Altro che vuoi dirci?

Inviando i tuoi dati accetti le condizioni sulla privacy. Li useremo per rispondere alle tue domande e richieste.

TOP