Guida approfondita sui flexbox CSS
La proprietà CSS flexbox, da quando è stata introdotta, ha rivoluzionato la gestione dei box html, in queste righe descrivo in dettaglio la proprietà
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.
Cosa fa questa proprietà?
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 è.
Come possiamo iniziare?
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.
Cominciamo a posizionare i box
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:
- row che, come detto, ha il .parent che agisce come una riga quindi con allineamento rispetto all’asse verticale (fig. 1)
- column che ha il .parent che agisce come colonna quindi tutti i .child saranno uno sotto l’altro (fig. 2)
- column-reverse, con i box in ordine inverso rispetto allo standard delle column,. (fig.3)
- row-reverse, con i box con l’ordine inverso a quello standard in row. (fig.4)
Questo è il primissimo passo, per avere una gestione degli elementi html con la proprietà flexbox.
Come centrare orizzontalmente e verticalmente i box?
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:
- center che, come detto, posiziona i tre box centralmente sull’asse orizzontale.
- flex-start che posiziona il contenuto all’inizio del .parent sul lato sinistro.
- flex-end che posiziona il contenuto alla fine del .parent quindi sul lato destro.
- space-between con il primo box dei tre posizionato all’inizio del .parent, invece l’ultimo .child posizionato alla fine del .parent, sul lato destro
- space-around con tutti e tre i box distribuiti equamente e con la stessa spaziatura tra uno e l’altro
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:
- center con i box .child posizionati centralmente sull’asse verticale (fig. 1)
- flex-start con i tre box posizionati tutti vicino al lato superiore del .parent (fig. 2)
- flex-end con i tre box posizionati tutti vicino al lato inferiore del .parent (fig. 3)
- stretch con i box che occupano tutta l’altezza del .parent (fig. 4)
- baseline allineati verticalmente rispetto al loro contenuto. (fig. 5)
Come gestire l’ordine dei tre box?
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 gestire troppi elementi nello stesso box parent?
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:
- nowrap per non mandare nessun elemento del parent su un’altra riga (fig.1)
- wrap per mandare a capo gli elementi in fondo, e che non ci stanno sulla stessa riga (fig. 2)
Cos’è il flex-shrink?
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.
Conclusione
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.
2 Comments
Ciao ho trovato utile la tua guida. Io mi sto approcciando adesso, devo inserire delle immagini affianco a del paragrafo per introdurre della didascalia, e quindi devo usare i div, ma non voglio usare il float perché mi è stato detto che non è responsive. Mi potresti dare qualche consiglio. Grazie
Ciao Riccardo, mi scuso per questa risposta molto tardiva.
Per ottenere un risultato simile a quello che hai descritto tu, devi inserire il paragrafo e l’immagine in un div, e poi su quest’ultimo dare un display: flex con un flex-direction: row..E’ importante che tu lavori con la proprietà flexbox sul box che contiene l’immagine ed il paragrafo. Con il felx-direction settato con valore row, affiancherai immagine e paragrafo.