Proprietà align-content CSS

Definizione e uso

Proprietà align-content Modifica delle proprietà Proprietà flex-wrap Il comportamento dell'attributo. È simile a align-items Simile, ma non allinea gli elementi flessibili, ma le linee flessibili.

Attenzione:Deve esserci più di una riga di elementi affinché questo attributo funzioni!

Suggerimento:Usa justify-content L'attributo allinea gli elementi lungo l'asse principale (main-axis) in modo orizzontale.

Vedi anche:

Corso CSS:Flexbox CSS

Corso CSS:CSS Grid

Manuale di riferimento CSS:Proprietà alignItems

Manuale di riferimento CSS:Proprietà alignSelf

Manuale di riferimento CSS:Proprietà justifyContent

Manuale di riferimento HTML DOM:Proprietà alignContent

Esempio

Packaging delle righe al centro del contenitore flessibile:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Prova tu stesso

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
stretch Valore predefinito. Le righe si allungano per riempire lo spazio rimanente.
center Il packaging delle righe è diretto al centro del contenitore flessibile.
flex-start Il packaging delle righe è diretto all'inizio del contenitore flessibile.
flex-end Il packaging delle righe è diretto alla fine del contenitore flessibile.
space-between Le righe si distribuiscono uniformemente nel contenitore flessibile.
space-around Le righe si distribuiscono uniformemente nel contenitore flessibile, ciascuna occupyingo metà.
initial Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit Incorpora questo attributo dall'elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: stretch
Ereditarietà: No
Produzione animazione: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.alignContent="center"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0