Cos'è CSS Flexbox?
CSS Flexbox (Flexible Box Layout) è un modello di layout unidimensionale per distribuire lo spazio e allineare gli elementi in una riga o colonna. Il contenitore flex è definito con display: flex, e i suoi figli diretti diventano elementi flex. Proprietà chiave del contenitore: flex-direction (riga o colonna), flex-wrap (riga singola vs. multiriga), justify-content (allineamento sull'asse principale), align-items (allineamento sull'asse trasversale per riga) e align-content (allineamento sull'asse trasversale di più righe). Proprietà chiave degli elementi: flex-grow (quanto cresce un elemento), flex-shrink (quanto si restringe), flex-basis (dimensione iniziale) e align-self (sovrascrive l'align-items del contenitore per un elemento specifico). Flexbox è ideale per barre di navigazione, righe di schede, layout centrati e qualsiasi disposizione unidimensionale.
Come utilizzare il Generatore CSS Flexbox
-
Regola le proprietà del contenitore (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) usando i menu a discesa e il campo di input.
-
Fai clic su qualsiasi elemento nell'anteprima per selezionarlo (diventa arancione).
-
Imposta flex-grow, flex-shrink, flex-basis e align-self dell'elemento selezionato nel pannello elemento.
-
Fai clic su '+ Aggiungi elemento' per aggiungere altri elementi; fai clic su 'Rimuovi' per eliminare l'elemento selezionato.
-
Passa tra le schede CSS e HTML per vedere il codice generato, poi fai clic su Copia.
-
Fai clic su 'Reimposta tutto' per ricominciare con il layout predefinito a 3 elementi.