Come utilizzare Flex per rendere il tuo sito Web più reattivo

I moderni design dei siti Web devono essere reattivi ai cambiamenti nel contenuto o alle dimensioni del browser. Puoi ottenere questo risultato usando vanilla CSS, media query o flexbox.

Alcune proprietà flessibili come flex-wrap o flex-grow possono modificare le dimensioni o la posizione di un elemento in modo visivamente accattivante. Questo articolo esaminerà esempi di come utilizzare le proprietà flex-grow, flex-shrink, flex-wrap, flex-flow e order flex.

Come configurare il display CSS Flex

Se non hai familiarità con le basi di flexbox, puoi esplorare questo Frammento di CodePen. Include codice di esempio per una semplice configurazione di flexbox. Innanzitutto, dovrai avvolgere gli elementi figlio sotto un div genitore o "contenitore flessibile".

<classe div="genitore">
<classe div="oggetto bambino"></div>
<classe div="oggetto bambino"></div>
<classe div="oggetto bambino"></div>
</div>

Aggiungi il display: flessibile proprietà al genitore div.

.genitore {
 display: flessibile;
}

Come far crescere gli articoli all'interno di un container

Il flex-crescita consente agli elementi figlio di espandersi per riempire lo spazio disponibile nel relativo div padre. Questa proprietà consente di specificare la quantità di spazio "rapporto" che ogni articolo della scatola può occupare.

Per aggiungere flex-grow, aggiungi la proprietà CSS flex-grow a ciascuno degli elementi figlio.

<classe div="genitore">
<stile div="colore di sfondo: rosso; flex-crescita: 1"></div>
<stile div="colore di sfondo: arancione; flex-crescita: 1"></div>
<stile div="colore di sfondo: giallo; flex-crescita: 1"></div>
<stile div="colore di sfondo: verde; flex-crescita: 3"></div>
<stile div="colore di sfondo: blu; flex-crescita: 1"></div>
</div>

.genitore {
 larghezza: 500px;
 display: flessibile; 
}

Una crescita flessibile di 0 per ogni elemento significa che le scatole non si espandono per riempire lo spazio del loro genitore. 0 è il valore predefinito per questa proprietà.

Una crescita flessibile di 1 per ogni articolo costringerà tutte le scatole ad espandersi allo stesso modo per adattarsi allo spazio disponibile all'interno del genitore.

Se uno degli articoli aveva un flex maggiore, ad esempio:

<stile div="colore di sfondo: verde; flex-crescita: 3"></div>

La casella verde tenterà di guadagnare fino a tre volte la quantità di spazio delle altre caselle.

Visualizza il codice per la proprietà flex-grow in questo Frammento di CodePen per vedere un esempio funzionante.

Come restringere gli oggetti all'interno di un contenitore

In alcuni casi, la larghezza del genitore potrebbe ridursi e gli elementi all'interno del genitore non si adatteranno più all'interno. Puoi usare il termoretraibile proprietà per ridurre le dimensioni delle scatole. In questo modo, possono rimanere contenuti all'interno del genitore.

Flex-shrink ti consente di specificare un rapporto per quanto ogni articolo deve ridursi.

Aggiungi la proprietà flex-shrink agli elementi div figlio. Modificare le larghezze del genitore e dei figli in modo che gli elementi non rientrino nel contenitore.

<classe div="genitore">
<stile div="colore di sfondo: rosso; termoretraibile: 1"></div>
<stile div="colore di sfondo: arancione; termoretraibile: 1"></div>
<stile div="colore di sfondo: giallo; termoretraibile: 1"></div>
<stile div="colore di sfondo: verde; termoretraibile: 2"></div>
<stile div="colore di sfondo: blu; termoretraibile: 1"></div>
</div>

.genitore {
 larghezza: 500px;
 display: flessibile; 
}
.genitore div {
 larghezza: 150px;
 altezza: 150px;
}

Una contrazione flessibile di 1 per tutti gli articoli significa che tutti gli articoli si ridurranno allo stesso modo se la larghezza del genitore viene ridotta.

Se uno degli articoli aveva un flex-shrink più grande, ad esempio:

<stile div="colore di sfondo: verde; termoretraibile: 2"></div>

La casella verde tenterà di ridursi il doppio rispetto alle altre caselle.

Visualizza il codice per la proprietà flex-shrink in questo Frammento di CodePen per vedere un esempio funzionante.

Come spingere gli elementi alla riga successiva

Il involucro flessibile La proprietà consente di inviare gli elementi alla riga successiva se non rientrano nella larghezza del contenitore padre. Qui, gli articoli non si restringono e sarai in grado di preservare l'altezza e la larghezza degli articoli.

Le opzioni per la proprietà flex-wrap includono:

flex-wrap: nowrap | avvolgere | avvolgere al contrario

Aggiungi la proprietà flex-wrap al contenitore flex genitore. Assicurati che la larghezza del contenitore sia sufficientemente piccola, in modo che non si adatti agli oggetti figlio al suo interno. Ciò forzerà tutti gli elementi in eccesso su una nuova riga.

<classe div="genitore">
<classe div="rosso"></div>
<classe div="arancia"></div>
<classe div="giallo"></div>
<classe div="verde"></div>
<classe div="blu"></div>
</div>

.genitore {
 larghezza: 300px;
 bordo: 1px nero pieno;
 display: flessibile;
 flex-wrap: avvolgere;
}
.genitore div {
 larghezza: 100px;
 altezza: 100px;
}

Il valore di avvolgimento posizionerà gli articoli a partire dall'angolo in alto a destra del contenitore. Il valore wrap-reverse riposiziona gli elementi per iniziare nella parte inferiore destra del contenitore. Quando avvolgi gli articoli, spingerà gli articoli su una nuova riga sopra invece che sotto.

Se specifichi un'altezza sul contenitore principale, il contenitore aggiungerà uno spazio tra le righe di elementi.

Se si desidera rimuovere questa spaziatura, ma mantenere l'altezza del div padre, utilizzare la proprietà align-content. Specificare la proprietà align-content come "flex-start" nel div padre:

.genitore { 
 larghezza: 300px; 
 altezza: 300px;
 bordo: 1px nero pieno; 
 display: flessibile;
 flex-wrap: avvolgere; 
 align-content: flex-inizio;
}

La proprietà align-content è uno dei numerosi core proprietà flexbox che consentono di controllare l'allineamento.

Visualizza il codice per la proprietà flex-wrap in questo Frammento di CodePen per vedere alcuni esempi.

Come inviare gli elementi alla colonna successiva

Se stai usando un layout diverso (come una colonna) e hai ancora bisogno degli elementi da avvolgere, puoi usare il flusso flessibile proprietà. Questa proprietà flex è una combinazione delle proprietà flex-wrap e flex-direction.

Esempi di combinazioni di opzioni che puoi utilizzare per la proprietà flex-flow includono:

flex-wrap: riga nowrap | colonna nowrap | avvolgimento di fila | avvolgimento della colonna | riga a capo indietro | avvolgimento della colonna all'indietro

Questa proprietà funziona in modo simile alla proprietà flex-wrap sopra. Aggiungi flex-flow al contenitore flex genitore. Assicurati che la larghezza del contenitore principale sia sufficientemente piccola da forzare l'avvolgimento degli elementi secondari:

.genitore {
 larghezza: 300px; 
 bordo: 1px nero pieno; 
 display: flessibile; 
 flusso flessibile: avvolgimento della colonna;
}
.genitore div {
 larghezza: 100px;
 altezza: 100px;
}

Gli elementi andranno a capo nella direzione specificata (riga o colonna).

Visualizza il codice per la proprietà flex-flow in questo Frammento di CodePen per vedere alcuni esempi.

Come modificare l'ordine degli articoli

Se hai bisogno di riorganizzare gli elementi sulla pagina a causa di qualsiasi tipo di dati dinamici, puoi utilizzare il ordine proprietà flessibile. Questa proprietà consente di specificare l'ordine di visualizzazione di ciascun articolo.

I numeri non devono necessariamente iniziare da 1. Puoi utilizzare qualsiasi numero e intervallo e la proprietà order ordinerà gli elementi HTML dal più basso al più alto.

Aggiungi la proprietà dell'ordine a ciascuno degli articoli all'interno del contenitore flessibile principale:

<classe div="genitore">
<classe div="rosso" stile="ordine: 2"></div>
<classe div="arancia" stile="ordine: 1"></div>
<classe div="giallo" stile="ordine: 5"></div>
<classe div="verde" stile="ordine: 4"></div>
<classe div="blu" stile="ordine: 3"></div>
</div>

In questo caso, la casella arancione sarà all'estrema destra, seguita dalle caselle rossa, blu, verde e poi gialla.

Visualizza il codice per la proprietà dell'ordine in questo Frammento di CodePen per vedere alcuni esempi.

Sperimentazione con più proprietà CSS nel tuo sito web

Puoi utilizzare queste proprietà flessibili per rendere il tuo sito Web più reattivo. Ciò include l'utilizzo delle proprietà flex-grow, flex-shrink, flex-wrap, flex-flow e order flex.

Puoi anche conoscere più proprietà flessibili per aiutarti ad allineare gli elementi HTML sul tuo sito web.

Come utilizzare Flex per allineare elementi HTML

Leggi Avanti

Circa l'autore