Layout flexbox: Distribuisci i figli in modo uniforme

Flexbox è un potente modulo di layout in CSS che ti aiuta a utilizzare in modo efficiente lo spazio disponibile all'interno di un contenitore. In questo tutorial imparerai come distribuire uniformemente gli elementi figlio all'interno di un contenitore flessibile. Questo è particolarmente utile per i design responsive, in cui la larghezza della finestra può variare. Iniziamo subito!

Principali punti chiave

• Con Flexbox è possibile distribuire uniformemente gli elementi figlio nel layout, impostando i valori flex degli elementi di conseguenza.
• Puoi rendere flessibili larghezza e altezza degli elementi figlio, in modo che si adattino automaticamente allo spazio disponibile, senza dover utilizzare misure fisse.

Istruzioni passo dopo passo

Per capire come distribuire uniformemente gli elementi figlio all'interno di un contenitore flessibile, segui questi passaggi:

Innanzitutto, crea un contenitore flessibile applicando la proprietà CSS display: flex;. Di seguito trovi un esempio semplice su come farlo. Assicurati che il contenitore sia allineato nel formato di riga (row):

In questo stato, lo spazio viene distribuito uniformemente su tutti gli elementi figlio, a condizione che tali elementi non abbiano larghezze fisse. Se imposti la larghezza degli elementi figlio e la fissa a 100 pixel, questi saranno distribuiti uniformemente nel contenitore, ma questo non è ottimale per un design responsive:

Se rimuovi le larghezze fisse, noterai che lo spazio viene drasticamente ridotto, soprattutto quando il testo negli elementi figlio è assente. In questo caso, tutto si riduce alla larghezza minima definita dal testo:

Per distribuire uniformemente lo spazio disponibile, devi impostare il valore flex per gli elementi figlio. Ciò si ottiene comodamente applicando la proprietà flex, che ti consente di definire una parte proporzionale dello spazio disponibile. Imposta il valore flex per ciascun elemento figlio su 1:

Dopo averlo fatto, vedrai che tutti gli elementi figlio hanno distribuito uniformemente lo spazio. Questa è una soluzione molto flessibile poiché si adatta dinamicamente alla larghezza del contenitore:

Puoi anche variare i valori flex per creare proporzioni diverse. Ad esempio, se il primo elemento dovrebbe ricevere metà dello spazio, potresti impostarlo su flex: 2;, mentre gli altri elementi mantengono flex: 1;:

Dopo aver adattato i valori, gli elementi figlio vengono distribuiti secondo i valori impostati. Grazie alle proporzioni flessibili che hai assegnato, il primo elemento avrà più spazio rispetto agli altri:

Cambiando la larghezza del contenitore, i rapporti rimangono stabili. Indipendentemente che tu modifichi la larghezza a 800 pixel o 400 pixel, gli elementi figlio si adattano automaticamente e distribuiscono uniformemente lo spazio in base ai valori flex precedentemente definiti:

Puoi facilmente regolare le proprietà Flexbox modificando la proprietà flex-direction. Ad esempio, se cambi il Flex-Container da riga a colonna, la logica della distribuzione rimane la stessa. Gli elementi figlio verranno quindi disposti verticalmente:

Assicurati che l'altezza degli elementi figlio non sia definita per mantenere la flessibilità. Questo funziona particolarmente bene per i design responsive, in quanto gli elementi figlio si adattano alle dimensioni e all'orientamento dello schermo:

In questo modo puoi creare un layout altamente responsivo, garantendo che il tuo design sia eccezionale sia sulla vista desktop sia su quella mobile.

Riassunto

In questo tutorial hai imparato come utilizzare Flexbox in CSS e HTML per distribuire in modo uniforme gli elementi figlio. Grazie alle proprietà Flex, puoi creare layout reattivi che si adattano senza soluzione di continuità a diverse dimensioni e formati dello schermo.