Tali padri tali figli: non è un sermone morale sulla genetica ereditaria, si chiama Flexbox!

Che Flexbox sia potentissimo non ci piove, tecnologia integrata nei CSS che può essere attivata con l’espressione magica display: flex; al posto di quelle letterarie che suonano come abracadabra. Siamo sul versante abbigliamento siti, se vogliamo continuare a metaforizzare lo sviluppo web con l’abbellimento portato dalle regole CSS. Il principale problema di oggi con tanti schermi di diverse dimensioni è quello di riuscire a creare una WEB APP che sia adattabile ed elastica (per l’appunto flessibile) senza compromettere il proprio CV (immaginate come web designer di far vedere un lavoro dove sul mobile si vede in maniera pietosa!). Quindi armiamoci e partiamo con esempi pratici, tenendo presente che posso dare elasticità alle mie strutture anche senza flexbox impostando nei miei fogli stile delle media query nei CSS. Ma perchè sbattersi tanto quando queste media query sono già preimpostate in flexbox? Quello che c’è da sapere sulle matriosche o scatole dentro le scatole sul web e su Flexbox è che i padri contengono ripercussioni sulle regole di stile dei figli se viene attivata l’opzione per l’appunto menzionata sopra che è:

display: flex;

all’ interno dei css. Questa tecnica mi consente di muovermi in maniera verticale e orizzontale su tutta la pagina, esaminiamo la seguente situazione all’ interno di un tag body di una pagina html:

<div id=”parent”>

<div class=”childitem child1″>1</div>
<div class=”childitem child2″>2</div>
<div class=”childitem child3″>3</div>

</div>

qui abbiamo la classica situazione dove abbiamo un elemento identificato come padre dall’ ID e tre figli in esso contenuti.Ora immaginiamo di avere all’ interno della pagina tag HEAD il seguente foglio stile:

<style>

#parent { background: lightblue; padding: 10px;}
.childitem { }
.child1 { background: cornflowerblue; }
.child2 { background: deepskyblue; }
.child3 { background: dodgerblue; }

</style>

L’effetto che fa a video senza flexbox applicato è il seguente:

https://www.farwebdesign.com/projectflex/flexbox1.html

 

proviamo adesso ad attivare la formula magica sul parent odificando le istruzioni in:

#parent { background: lightblue; padding: 10px; display:flex;}

e vediamo a video l’effetto che fa:

https://www.farwebdesign.com/projectflex/flexbox2.html

 

è cambiato qualcosa? Certo che si, siamo entrati automaticamente in un campo flessibile, basta ridimensionare la pagina per rimpicciolirla per vedere da ora in poi l’effetto che fa. Andiamo avanti nel nostro esperimento e impostiamo una lunghezza per tutti i nostri elementi figli:

.childitem { width:100px }

vediamo l’effetto che fa dal vivo e nella pratica:

https://www.farwebdesign.com/projectflex/flexbox3.html

 

e se volessi cambiare direzione e posizionare i miei elementi figli incolonnati uno sopra l’altro? Entra in scena una nuova proprietà sul foglio stile del parent: flex-direction: column; vediamo l’effetto che fa:

https://www.farwebdesign.com/projectflex/flexbox4.html

 

pe ritornare a posizionare tutti gli elementi su una stessa riga posso settare: flex-direction: row; o anche semplicemente inibire le funzionalità anteponendo flex-direction: nocolumn; e analogamente per la riga flex-direction: norow; posso anche invertire il valore degli elementi e rovesciarli impostando la direzione con un reverse, sia per la riga o per la colonna quindi con un flex-direction: row-reverse; o anche flex-direction: column-reverse; vedere ad esempio cosa succede nel caso di una colonna:

https://www.farwebdesign.com/projectflex/flexbox5.html

 

vediamo anche l’esempio per la riga:

https://www.farwebdesign.com/projectflex/flexbox6.html

 

posso anche impostare una lunghezza fissa al parent e aggiungere altri figli per vedere l’effetto che fa:

https://www.farwebdesign.com/projectflex/flexbox7.html

 

Impostando la proprietà wrap a flex-wrap:wrap; posso far scorrere gli elementi della riga sotto durante il ridimensionamento:

https://www.farwebdesign.com/projectflex/flexbox8.html

 

sul wrap posso anche reimpostare una lunghezza fissa del parent, per cui quello che fa il wrap diventa più visibile:

https://www.farwebdesign.com/projectflex/flexbox9.html

 

naturalmente impostando la proprietà wrap a no wrap con flex-wrap:nowrap; tornerei a vedere a video:

https://www.farwebdesign.com/projectflex/flexbox10.html

 

intuitivamente sappiamo anche che applicando la proprietà flex-wrap:wrap-reverse; possiamo rovesciare il contenuto degli elementi figlio:

https://www.farwebdesign.com/projectflex/flexbox11.html

 

Abbiamo visto che direzione e contenuti wrap, ossia spalmati su tutta l’area della pagina sono molto potenti. Ma c’è un modo di combinare queste due proprietà in un unica property? Si con flex-flow:row wrap; il flusso prende due parametri successivi, vediamo un esempio per la riga:

https://www.farwebdesign.com/projectflex/flexbox12.html

 

e per la colonna:

https://www.farwebdesign.com/projectflex/flexbox13.html

 

ovviamente impostando il flusso a no wrap flex-flow:column nowrap; vedrei:

https://www.farwebdesign.com/projectflex/flexbox14.html

 

e impostando lex-flow:row nowrap; per la riga vedrei invece:

https://www.farwebdesign.com/projectflex/flexbox15.html

 

a questo punto vediamo cosa fa la proprietà justify-content:flex-start;

https://www.farwebdesign.com/projectflex/flexbox16.html

 

cioè in sostanza posso modellare gli elementi sulla singola riga con larghezze variabili e spaziatura. Vediamo cosa fa justify-content:flex-end;

https://www.farwebdesign.com/projectflex/flexbox17.html

 

e per centrare un elemento? Si usa justify-content:center;

https://www.farwebdesign.com/projectflex/flexbox18.html

 

e per dare una spaziatura? Si usa justify-content:space-between;

https://www.farwebdesign.com/projectflex/flexbox19.html

 

o anche l’aternativa justify-content:space-around;

https://www.farwebdesign.com/projectflex/flexbox20.html

 

posso anche impostare una nuova prprietà a tutti i figli con .childitem { flex-basis:300px;}, in questo modo posso differenziare le mie esigenze dimensionali perché potrei avere l’esigenza di allargare o restringere in futuro alcune aree del mio lay-out:

https://www.farwebdesign.com/projectflex/flexbox21.html

 

a questo punto per differenziare la grandezza delle mie celle su una riga applicherò sui figli la proprietà flex-grow:1; ipotizzando che voglio ingrandire quella centrale inserirò la proprietà nel figlio medio e lascerò che il primo e terzo elemento si prendano la dimensione base in pixel specificata da .childitem { flex-basis:300px;} , per esempio:

https://www.farwebdesign.com/projectflex/flexbox22.html

 

esistono tante altre proprietà da scandagliare come flex-shrink per regolare l’ampiezza sui ridimensionamenti , non a caso shrink significa CONTRARSI, per esempio:

https://www.farwebdesign.com/projectflex/flexbox23.html

 

Alla fine di questa scorribanda abbiamo capito che FLEXBOX strumento integrato all’ interno dei CSS è davvero potente e per l’appunto flessibile. Come dice il saggio, mi piego ma non mi spezzo, non è una esaltazione alla resilienza tanto decantata in questi angusti tempi moderni, ma un invito a studiare offerto da FLEXBOX per chi ha interesse a potenziare il suo cv di web designer! Ricordiamo che CSS e FLEXBOX si possono usare congiuntamente a seconda delle circostanze, per la migliore resa delle nostre pagine web! Good discovery!

Crea un sito o un blog gratuitamente presso WordPress.com.

Su ↑