CSS justify-content
La proprietà CSS3 justify-content definisce l'allineamento degli elementi lungo l'asse principale del contenitore
La proprietà justify-content
viene utilizzata per allineare gli elementi flessibili lungo l'asse principale di un contenitore (tipicamente orizzontale se flex-direction è row, o verticale se è column). Viene utilizzata all'interno di un contenitore Flexbox o Grid quando c’è spazio extra lungo l’asse principale oppure per distribuire gli elementi figli (non le righe) all'interno del contenitore.
Sintassi
Significato dei valori principali:
-
flex-start (default): gli elementi si allineano all'inizio dell'asse principale.
-
flex-end: gli elementi si allineano alla fine.
-
center: gli elementi sono centrati.
-
space-between: spazio uguale tra gli elementi, ma nessuno ai margini.
-
space-around: spazio uguale attorno ad ogni elemento.
-
space-evenly: spazio completamente uniforme tra e attorno a tutti gli elementi.
Esempio proprietà: justify-content
Codice Esempio: justify-content
.container {
display: flex;
justify-content: center;
}
Risultato: justify-content
Prova questo esempio
DEMO
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.192
