Visualizza il contenitore flex e gli elementi per vedere chiaramente come gli elementi figli si posizionano all'interno del contenitore flex
Regola le proprietà flexbox per osservare diversi effetti di allineamento e distribuzione
Direzione degli elementi flex
Allineamento degli elementi lungo l'asse trasversale
Allineamento e distribuzione lungo l'asse principale
Se gli elementi vanno a capo su nuove righe
Allineamento delle righe avvolte lungo l'asse trasversale
flex-direction: row | align-items: center | justify-content: flex-start | flex-wrap: nowrap | align-content: stretchContenitore flex con elementi di diverse dimensioni per dimostrare gli effetti di allineamento flexbox
row - Gli elementi scorrono orizzontalmente (da sinistra a destra)row-reverse - Gli elementi scorrono orizzontalmente (da destra a sinistra)column - Gli elementi scorrono verticalmente (dall'alto al basso)column-reverse - Gli elementi scorrono verticalmente (dal basso all'alto)nowrap - Gli elementi rimangono su una singola rigawrap - Gli elementi vanno a capo su nuove righe secondo necessitàwrap-reverse - Gli elementi vanno a capo su nuove righe in ordine inversoflex-start - Allinea gli elementi all'inizio dell'asse trasversalecenter - Centra gli elementi sull'asse trasversaleflex-end - Allinea gli elementi alla fine dell'asse trasversalestretch - Allunga gli elementi per riempire l'asse trasversalebaseline - Allinea gli elementi lungo la loro linea di baseflex-start - Raggruppa gli elementi all'inizio dell'asse principalecenter - Centra gli elementi sull'asse principaleflex-end - Raggruppa gli elementi alla fine dell'asse principalespace-* - Distribuisce lo spazio tra gli elementi