Ci sono proprietà che hanno cambiato decisamente la gestione degli elementi html, una di queste è sicuramente quella sui flexbox.
Ques’ultima è stata introdotta da pochi anni, ed è già subito stata utilizzata da moltissimi web designer ‘snellire’ il codice css.
infatti, come descriverò nelle righe successive, flexbox ha cambiato totalmente la gestione della distribuzione dei box html all’interno della pagina web.
Giusto pochi anni fa, avevo già scritto una piccola introduzione ai flexbox.
Ma rileggendola meglio qualche settimana fa, ho deciso di approfondire meglio alcuni concetti che gravitano intorno a questo argomento.
All’inizio era utilizzata poco, perchè alcuni browser (Internet Explorer in testa..) non renderizzava ancora correttamente il flexbox.
Ora invece, viene utilizzata dalla stragrande maggioranza di web designer e web developer.
Tant’è che l’ultima versione del famoso framework Bootstrap, è stato realizzato basandosi sul flexbox.
Questo articolo lo sc rivo , in un periodo in cui sto parlando e scrivendo molto sulle proprietà del box-model.
Rispetto a quelle precedentemente riassunte, questa proprietà ha dei concetti un pò più complessi e che richiedono un pò di pratica con la proprietà display.
Ma ora..non divaghiamo ancora troppo, e andiamo subito al punto, introducendo i concetti più importanti.
Ricordate, qualche anno fa, quando codice si utilizzava per affiancare due o più box sulla stessa riga di una pagina html?
Molte righe in cui si utilizzava parechhio la proprietà float o la proprietà display.
E molte volte, serviva anche la proprietà vertical align.
Ora invece, con i flexbox, possiamo affiancare i box e distribuirli nlla pagina come meglio ci conviene, sscrivendo poche righe di codice.
Basta inserire tutti gli elementi che ci interessano, all’interno di un’unico box,.
E successivamente gestire tutto, utilizzando la proprietà flexbox su quest’ultimo.
Ora, spiegato così, pare una procedura più complressa di quello che è.
Per utilizzare questa proprietà, basta veramente poco, ed il tempo che perderemo per affiancare, posizionare i box html sarà veramente molto di meno.
Come tutte le proprietà CSS, anche questa ha una sintassi corretta da seguire, ma prima di tutto bisogna impostare la nostra pagina html.
<html> <head> <link href="style.css" rel="stylesheet" type="type/css"/> </head> <body> <div class="parent"> <!------I TRE BOX CHE ANDREMO A POSIZIONARE------!> <div class="child"> Box 1 </div> <div class="child"> Box 2 </div> <div class="child"> Box 3 </div> <!-------------------------------------------------!> </div> </body> </html>
L’elemento html su cui utilizzeremo la proprietà flexbox sarà quello con classe .parent.
Invece quelli che sposteremo all’interno della pagina, saranno i tre box con classe .child.
All’interno degli elementi .child, ho inserito anche un testo per identificare meglio l’ordine con compaiono nella nostra.
Ora diamo un’aspetto e delle misure a questi tre box, poi, nelle righe successive, spiegherò. come spostarli, posizionarli all’interno della pagina:
.child { background-color:#3498db; color:white; height:100px; margin:15px; padding:15px; width:100px; }
Per ora, nulla di diverso da ciò che si conosce; ho dato l’aspetto di un quadrato a tutti e tre i box con classe .child.
Dopo aver dato un’aspetto ai nostri tre box html, all’interno del .parent, bisogna cominciare a distribuire i tre box sulla stessa riga.
E non uno sotto l’altro.
Però, prima di tutto, diamo un display dal valore flex al box .parent.
.parent { display:flex; } .child { background-color:#3498db; color:white; height:100px; margin:15px; padding:15px; width:100px; }
Facendo un ctrl+F5 noteremo che le cose non sono cambiate rispetto prima, ma che c’è bisogno di utilizzare la proprietà flex-direction.
.parent { display:flex; flex-direction: row; } .child { background-color:#3498db; color:white; height:100px; margin:15px; padding:15px; width:100px; }
Così facendo diciamo al nostro .parent di agire come una row, una riga, quindi avremo i box uno affiancato all’altro.
Per la flex-direction ci sono anche altri valori:
Questo è il primissimo passo, per avere una gestione degli elementi html con la proprietà flexbox.
Per posizionare i box equamente su tutto il .parent, ci sono due proprietà: justify-content e align-items.
La prima proprietà è quella che permette di allineare i box orizzontalmente, la seconda invece verticalmente.
Se vogliamo che i tre box siano al centro rispetto all’asse verticale del .parent, la sintassi è la seguente:
.parent { display:flex; flex-direction: row; justify-content:center; }
Così abbiamo i tre .child, con i margini e i padding che ho messo all’inizio di questo tutorial; così facendo abbiamo messo i div su tutta la riga .parent senza scrivere troppe righe.
Justify-content ha anche altri valori per distribuire orizzontalmente i box .child:
Se, in alternativa, volessimo centrare il contenuto sullò’asse verticale, come anticipato, utilizzeremo la proprietà align-items:
.parent { display:flex; flex-direction: row; justify-content:center; align-items: center; }
Ora avremo il contenuto che è allineato orizzontalmente e verticalmente rispetto al box .parent, ma per rendere più l’idea aggiungiamo un’altezza al .parent:
.parent { height:500px; display:flex; flex-direction: row; justify-content:center; align-items: center; }
Dando un’altezza maggiore al .parent avremo un’idea più chiara delle potenzialità della proprietà flexbox, e di tutte quelle che ci stanno intorno.
Anche qui, come nel caso del justify content, ci sono altri valori per gestire l’allineamento verticale:
Come visto nell’articolo sui flexbox di qualche anno fa, con questa proprietà si può sconvolgere l’ordine dei box html, scrivendo poche righe di CSS.
Qui però non modificherò il box con classe .parent, ma agirò sui div html con classe child.
E la proprietà CSS corretta da utilizzare è l’order, che dovrà essere associata ad ogni singolo div html con classe .child.
Quindi per dare ogni singolo ordine ai div, senza fare troppo disordine nel codice, utilizzerò un id per ogni div.
Quindi riprendiamo il nostro file html, dell’esempio appena visti, e cominciamo a lavorare con gli id:
<html> <head> <link href="style.css" rel="stylesheet" type="type/css"/> </head> <body> <div class="parent"> <!------I TRE BOX CHE ANDREMO A POSIZIONARE------!> <div class="child" id="box-1"> Box 1 </div> <div class="child" id="box-2"> Box 2 </div> <div class="child" id="box-3"> Box 3 </div> <!-------------------------------------------------!> </div> </body> </html>
Ed ora possiamo cominciare a lavora con la proprietà order, raggruppando tutti gli id, per avere più facilità nel trovarli quando vorremo modificare il nostro css:
.parent { height:500px; display:flex; flex-direction: row; justify-content:center; align-items: center; } .child { background-color:#3498db; color:white; height:100px; margin:15px; padding:15px; width:100px; } #box-1 { order:2; } #box-2 { order:1; } #box-3 { order:3; }
Come si può ben notare, ho usato una sintassi semplicissima, aggiungendo veramente poche righe CSS, e con la semplice seguente sintassi:
#selectorID { order: value to order; }
Questo proprietà interssante, può servire, ad esempio, quando abbiamo due box che, nei dispositivi mobili, devono essere invertiti.
Perciò si può aggiungere una @media query ed cambiare, invertire le posizioni degli elementi in pochi passi, come nell’esempio:
@media screen and (max-width:768px) and (min-width:320px) { #box-1 { order:2; } #box-2 { order:1; } #box-3 { order:3; } }
Avevo già fatto un piccolo articolo sull’utilizzo delle media query, in cui introducevo i concetti basilari di queste utilissime proprietà.
In questo caso, da una larghezza minima dello schermo di 320px (smartphone molto piccoli), fino ad una larghezza massima di 768px (tablet posizionati in verticale), avremo i primi due box con la posizione invertita.
Come abbiamo visto nelle prime righe di questo articolo, abbiamo il box che contiene tutti gli elementi che abbiamo soprannominato parent.
Esso, ovviamente, può avere anche più di tre elementi html al suo interno.
Normalmente, quando questi elementi occupano più dello spazio consentito dalla achermata, quelli in eccesso andranno a capo automaticamente.
Invece con i flexbox, possiamo decidere se andare a capo oppure adattare tutti gli elementi, rispetto all larghezza.
Questa proprietà è il flex-wrap ed è da utilizzare sul box con classe .parent, ed ha la seguente sintassi:
.parent { flex-wrap: value of property }
I valori che si possono inserire per questa proprietà sono solo due, e sono i seguenti:
Come detto, possiamo gestire in poche righe gli elementi all’interno del .parent.
Anche la proprietà flex-shrink, permette di ridurre la larghezza di un elemento con la giusta proporzione, ad esempio:
#box-2 { flex-shrink: 2; }
In questo esempio diciamo che il secondo box, sarà largo la metà rispetto alla larghezza attuale.
Anche questa situazione potrebbe capitare quando il sito viene visualizzato su mobile o tablet e vogliamo che alcuni elementi occupino meno spazio.
Dopo aver scritto una mini introduzione, che non mi soddisfaceva a pieno, ho deciso di riprendere un pò i flexbox.
Perchè ritengo che può veramente cambiare la vita dei web designer, che a volte, devono realizzare interfacce con molti elementi grafici da posizionare.
E questo insieme di proprietà possono essere veramente di grande aiuto.