Guida completa al dimensionamento di Flexbox

Hai visto parola flex nel ispettore del codice e non sai come funziona? Non sai nemmeno che cosa é Flexbox? Vorresti scoprire di piu su questa tecnica per creare layout flessibili? Allora questo articolo ti sara d'aiuto.

Tecnica di Flexbox consente di creare layout flessibili che si adattano perfettamente allo schermo. Se si imposta tutto correttamente, non avrai  piu bisogno creare query multimediali per supporti di schermi varie, orientamento e grandezza della finestra del browser.

In questo tutorial, ti mostrerò come utilizzare le proprietà di ridimensionamento di Flexbox come: flex-grow, flex-shrink, flex-base e flex.

Riempire lo spazio libero

Uno degli aspetti più difficili della scrittura CSS è capire come distribuire lo spazio libero che rimane sullo schermo dopo che la pagina è piena di contenuti. Con alcune dimensioni delle finestre ti troverai con lo spazzio in acesso e avresti voglia di riempirlo con qualcosa. Invece nel casi contrari quando spazio e insufficente  ti troverai con il layout in qualche modo rotto.

 

Le proprietà  di Flexbox consentono di risolvere questo problema in tre modi:

 

flex-grow: come devono comportarsi gli elementi flessibili quando esiste lo spazio in eccesso  (come dovrebbero allungarsi).

flex-shrink: come dovrebbero comportarsi gli elementi flessibili quando non c'è abbastanza spazio libero (come dovrebbero ridursi).

flex-base: come dovrebbero comportarsi gli elementi flessibili quando lo spazio c'è esattamente in sufficienza.

Poiché la flexbox è un layout unidimensionale a differenza di CSS Grid, che è bidimensionale è possibile allocare spazio libero lungo l'asse principale (dall'alto verso il basso, dal basso verso l'alto, da sinistra a destra o da destra a sinistra) impostando la direzione dell'asse utilizzando la proprietà flex-direction .
dis1 flex

Per maggior parte dei siti, dove la scrittura del testo va da  sinistra a destra per flex-direction  si utilizza valore  row , il che significa che è possibile distribuire lo spazio libero da sinistra a destra. Questa è anche la direzione flex predefinita, quindi la userò nei seguenti esempi.

1. Spazio libero in eccesso: flex-grow

La proprietà flex-grow determina in che modo lo spazio extra deve essere distribuito tra gli elementi. La cosa più importante da ricordare sulle dimensioni di flexbox è che flex-grow non condivide larghezza del intero flex-container, ma solo lo spazio che rimane dopo che il browser visualizza tutti gli elementi flessibili. Se non c'è spazio libero,  flex-grow non avra alcun effetto.

Iniziamo con il seguente codice HTML:

<div class="container">
 <div class="item item-1">1</div>
 <div class="item item-2">2</div>
 <div class="item item-3">3</div>
</div>

La classe .container sarà il nostro flex-container (per esso indicheremo display: flex; ) e gli elementi .item saranno elementi flessibili:

.container {
  background-color: darkslategrey;
  padding: 1rem;
  display: flex;
  flex-direction: row;
}
.item {
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  width: 3rem;
  padding: 2rem 1rem;
  background: #e2f0ef;
  border: 3px solid #51aaa3;
  color: #51aaa3;
  margin: 0.375rem; 
}

Se non diciamo al browser cosa fare con lo spazio rimanente, ecco come gli elementi flessibili verranno posizionati sullo schermo:

.

1
2
3

Il browser utilizzava il valore di flex-grow predefinito, ovvero 0. In certi situazioni posiamo usare questo valore, tuttavia la cosa che ci interessa di piu e di  distribuire lo spazio in eccesso fra elementi presenti, per ottenere cio assegneremo a   flex-grow valore 1:

.item {
  flex-grow: 1;
}

Come puoi vedere di seguito, gli elementi flessibili si estendendono e riempino tutto lo spazio disponibile:

.

1
2
3

Nell'esempio sopra, tutti gli elementi flex hanno lo stesso valore di flex-grow, quindi si allungano allo stesso modo. Tuttavia, puoi anche costringerli a allungarsi in misura diversa.  Ad esempio, .item-1 può occupare il doppio dello spazio disponibile rispetto ad altri elementi. Lo definiremo così:

item {
    flex-grow: 1;   
}
.item-1 {
    flex-grow: 2;
}

Allo stesso modo, è possibile impostare diversi valori di flex-grow per ogni elemento flex in modo che si estendano in modo diverso l'uno rispetto all'altro. Sperimenta con i valori in questo esempio e scopri come esso influiscono sul layout:

1
2
3

 

2. Spazio libero negativo: flex-shrink

 

La proprietà flex-shrink è l'opposto di flex-grow. Definisce come devono comportarsi gli elementi flessibili quando non c'è abbastanza spazio sullo schermo. Questo accade quando le dimensioni degli elementi flessibili è maggiore della dimensione del contenitore flessibile.

Senza flex-shrink, il prossimo esempio di  CSS fornirà un layout in cui gli elementi superano il contenitore, poiché la larghezza totale degli elementi (3 * 10rem) è maggiore della larghezza del contenitore (20rem).

.container {
 width: 20rem;
 padding: 1rem;
 background-color: darkslategrey;
 display: flex;
 flex-direction: row;
}
.item {
 width: 10rem;
 padding: 2rem 1rem;
 font-size: 2rem;
 line-height: 1;
 text-align: center; 
 background: #e2f0ef;
 border: 3px solid #51aaa3;
 color: #51aaa3;
 margin: 0.375rem; 
}

dis2 flex

Il caso ipotetico senza flex-shrink.

 

Fortunatamente per noi, flex-shrink è inserito  di default, assumendo il valore 1, che ci dà un layout in cui gli elementi sono collocati in un contenitore, anche se non hanno abbastanza spazio.

Quando flex-shrink impostato a 1, gli elementi flex sono completamente flessibili e quando non c'è abbastanza spazio vengono compressi insieme al contenitore flex.

Seguendo la stessa logica, puoi rendere gli elementi flessibili completamente inflessibili quando c'è spazio negativo sullo schermo. Devi solo impostare flex-shrink su 0 e gli elementi fuoriescono dal  flex-container:

.item {
 flex-shrink: 0;
}

Analogamente  a flex-grow  è  possibile impostare diversi valori di flex-shrink  per ciascuno degli elementi flessibili in modo che possano diminuirsi l'uno rispetto all'altro. Sperimenta con i valori in questo esempio e scopri come influiscono sul layout:

1
2
3

 

Testando la demo sopra, potresti notare che i valori piu grandi di flex-shrink  creano elementi flessibili più stretti. Ad esempio, il seguente codice CSS crea un layout in cui .item-3 è l'elemento più stretto:

.item-1 {
 flex-shrink: 1;
}
.item-2 {
 flex-shrink: 1;
}
.item-3 {
 flex-shrink: 2;
}

dis3 flex

Questo perché Flex-Shrink determina quanto un elemento dovrebbe ridursi rispetto ad altri elementi. Pertanto, i grandi valori di flex-shrink  danno elementi più piccoli, il che può creare confusione!

3. Spazio libero insufficiente: flex-base

 

L'ultimo scenario di allocare lo spazio libero è quando lo schermo ha tutto lo spazio necessario. Quindi gli elementi flessibili assumeranno il valore di flex-basis .

La proprietà flex-basis determina la dimensione iniziale degli elementi flessibili. Il valore predefinito è flex-basis:auto, ciò significa che la dimensione degli elementi flessibili viene calcolata utilizzando valore width  o height  (a seconda della ase flex ipostata per loyaut, da righe o colonne).

Tuttavia, quando il valore della flex-basis  è diverso dal auto, esso sovrascrive il valore del width  (o height  nel caso di layout verticali). Ad esempio, il seguente codice  CSS sostituisce il valore  di larghezza predefinita di 20rem; con valore corrispondente per ciascun elemento flex indicato in seguito

.item {
 width: 20rem;
 padding: 2rem 1rem;
 font-size: 2rem;
 line-height: 1;
 text-align: center; 
 background: #e2f0ef;
 border: 3px solid #51aaa3;
 color: #51aaa3;
 margin: 0.375rem; 
}
.item-1 {
 flex-basis: 5rem;
}
.item-2 {
 flex-basis: 10rem;
}
.item-3 {
 flex-basis: 30rem;
}

dis4 flex

Oltre alle unità di lunghezza, percentuale e auto, puoi  utilizzare anche la parola chiave content come valore per flex-basis . Ciò renderà l'elemento flex ampio quanto il contenuto che contiene.

Dato che flex-basis  determina il valore iniziale degli elementi flex  questo valore è la base che il browser utilizza per calcolare la flex-grow e flex-shrink . Nota che mentre flex-grow e flex-shrink hanno valori relativi (0, 1, 2, ecc.), Flex-base assume sempre un valore assoluto (px, rem, content, ecc.). )

 

Scrittura abbreviata delle proprietà flex.

 

Le proprietà  Flexbox  vine chiamata anche come  flex come hai gia capito dagli esempi sopra riportati. Esiste anche un modo di scrivere tutte le proprietà che abbiamo visto oggi come   flex-grow, flex-shrink e flex-basis  in un unica riga come vediamo sotto :

/* scritura estesa */
.item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
 
/* scrittura accorciata  */
.item {
 flex: 0 1 auto;
}

Non dobbiamo per forza indicare tutti e tre i valori . È possibile utilizzare uno o due valori di flex  in base alle seguenti regole e presupposti:

/* Un valore relativo: flex-grow */
flex: 1;
 
/* un valore assoluto : flex-basis */
flex: 20rem;
flex: 50px;
 
/* Un bvalore relativo e uno assoluto: flex-grow | flex-basis */
flex: 1 20rem;
 
/* Due valori relativi : flex-grow | flex-shrink */
flex: 1 2;
 
/* Tre valori: flex-grow | flex-shrink | flex-basis */
flex: 1 2 20rem;
 
/* Un loyaut completamente inflessibile : 0 0 auto */
flex: none;

Potrebbe volerci un po 'di tempo per abituarsi alla scrittura compatta di  flex, ma la documentazione del W3C in realtà raccomanda di usarlo invece di scrivere tutele proprietà in modo esteso

Conclusione

E tutto: puoi controllare  la flessibilità con le proprietà di Flexbox! In questo tutorial, ho usato la posizione orizzontale impostata dalla direzione flex-direction: row , quindi l'allocazione dello spazio avveniva orizzontalmente (da sinistra a destra) e flex-grow, flex-shrink e flex-basis hanno regolato la larghezza degli elementi flessibili.

Se applichi ciò che abbiamo visto  al layout verticale impostato utilizzando la flex-direction: column  la modifica verrà eseguita lungo l'asse verticale (dall'alto in basso) e le proprietà della grandezza cambieranno l'altezza degli elementi flessibili.

 

Autore: Anna Monus

Fonte: https://webdesign.tutsplus.com/

 

Scopri di piu su Flexbox cliccando il link  CSS3 flexbox!!

 

Letto 150 volte

Potrebbe interessarti