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.

Casi di Successo

Uno dei maggiori produttori mondiali di strumentazioni sanitarie per sale operatorie usa le nostre soluzioni System Integration e Web Application per gestire diagnostica, video e molto altro tramite schermi touch.

Inizia ora il tuo progetto

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