Proprietà CSS justify-content

Definizione e uso

La proprietà justify-content allinea gli elementi di un contenitore flessibile (orizzontalmente), quando gli elementi non occupano tutto lo spazio disponibile sull'asse principale.

Suggerimento:Utilizzare proprietà align-items Allineamento verticale degli elementi.

Vedi anche:

Tutorial CSS:Flexbox CSS

Tutorial CSS:CSS Grid

CSS 参考手册：proprietà align-content

CSS 参考手册：proprietà align-items

CSS 参考手册：Manuale CSS:

Proprietà align-selfManuale HTML DOM:

justify-content: space-between;

Proprietà justifyContent

Mostra elementi elastici con spaziatura prima, tra e dopo le righe:
  div {
  Allinea gli elementi elastici al centro del contenitore:
justify-content: space-around;

}

justify-content: center;

Troverai più esempi TIY nella parte inferiore della pagina.

Sintassi CSS

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Valore dell'attributo Valore
Valore predefinito: Descrizione
Valore predefinito. Gli elementi si trovano all'inizio del contenitore. flex-end
Gli elementi si trovano alla fine del contenitore. center
Gli elementi si trovano al centro del contenitore. space-between
Gli elementi lasciano spazio tra le righe. space-around
Imposta questa proprietà al suo valore predefinito. Vedi Gli elementi lasciano spazio prima, tra e dopo le righe. Imposta questa proprietà al suo valore predefinito. VediProprietà correlate agli animazioni
Eredita questa proprietà dal suo elemento padre. Vedi initial Eredita questa proprietà dal suo elemento padre. VediProprietà correlate agli animazioni

inherit

Dettagli tecnici Valore predefinito:
flex-start Ereditarietà:
No Produzione di animazioni:Non supportato. Vedi:Proprietà correlate agli animazioni
。 Versione:
CSS3 Sintassi JavaScript:

object.style.justifyContent="space-between"

justify-content: space-between;

Più esempi

Mostra elementi elastici con spaziatura prima, tra e dopo le righe:
  div {
  Allinea gli elementi elastici all'inizio del contenitore (predefinito):
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-start;

Mostra elementi elastici con spaziatura prima, tra e dopo le righe:
  div {
  Allinea gli elementi elastici alla fine del contenitore:
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-end;

Mostra elementi elastici con spaziatura prima, tra e dopo le righe:
  div {
  Mostra elementi elastici con spaziatura tra le righe:
justify-content: space-around;

}

justify-content: space-between;

Esempio

Mostra elementi elastici con spaziatura prima, tra e dopo le righe:
  div {
  display: flex;
justify-content: space-around;

}

Prova personalmente

Supporto del browser

Il numero nella tabella indica la versione del browser che supporta completamente l'attributo.

proprietà Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0