Proprietà align-self CSS

Definizione e uso

align-self L'attributo specifica il modo di allineamento dell'elemento selezionato all'interno del contenitore flessibile.

Attenzione:L'attributo align-self copre l'attributo align-items del contenitore flessibile. align-items Attributi.

Vedi anche:

Corso CSS:CSS Grid

Corso CSS:CSS Flexbox

Manuale CSS:Attributo alignContent

Manuale CSS:Attributo alignItems

Manuale CSS:Attributo justifySelf

Manuale HTML DOM:Attributo alignSelf

Esempio

Allinea al centro uno degli elementi all'interno dell'elemento flessibile:

#myBlueDiv {
  align-self: center;
}

Prova personalmente

Sintassi CSS

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

Valore dell'attributo

Valore Descrizione
auto Predefinito. L'elemento eredita l'attributo align-items del contenitore flessibile, se non c'è un contenitore padre, è "stretch".
stretch L'elemento viene allungato per adattarsi al contenitore.
center L'elemento si trova al centro del contenitore.
flex-start L'elemento si trova all'inizio del contenitore.
flex-end L'elemento si trova alla fine del contenitore.
baseline L'elemento viene posizionato sulla linea di base del contenitore.
initial Imposta questo attributo al suo valore predefinito. Vedi: initial.
inherit Questo attributo viene ereditato dal suo elemento padre. Vedi: inherit.

Dettagli tecnici

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

Supporto del browser

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

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