CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;

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

CODE: CSSpreleva codice
  1. .container {
  2.   display: flex;
  3.   justify-content: center;
  4. }

Risultato: justify-content

Prova questo esempio

DEMO
PayPal DONATE

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies