Proprietà CSS align-self
La proprietà align-self imposta l'allineamento degli elementi selezionati nel contenitore. Prova alcuni esempi con i suoi valori.
La proprietà CSS align-self allinea gli elementi selezionati all'interno della riga flex corrente e ha la precedenza sui valori di align-items.
La proprietà align-self è una delle proprietà CSS3.
La proprietà align-self accetta gli stessi valori della proprietà align-items:
- auto
- stretch
- flex-start
- flex-end
- center
- baseline
Questa proprietà viene ignorata se un margine verticale di un elemento flex è impostato su "auto". La proprietà align-self non si applica alle celle di tabella né ai box a livello di blocco.
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi flex, elementi grid e box con posizionamento assoluto. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.alignSelf = "auto"; |
Sintassi
Sintassi della proprietà CSS align-self
align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;Esempio della proprietà align-self:
Esempio della proprietà CSS align-self con il valore flex-start
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
section {
display: flex;
align-items: center;
height: 120px;
padding: 10px;
background: #99caff;
}
div {
height: 60px;
background: #1c87c9;
margin: 5px;
}
div:nth-child(1) {
align-self: flex-start;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Align-self property example</h2>
<p>Here the align-self for the first box is set to "flex-start".</p>
<section>
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
</section>
</body>
</html>Risultato
Ecco un esempio in cui vengono usati tre box e il secondo è specificato con il valore "flex-end".
Esempio della proprietà align-self con il valore "flex-end":
Esempio della proprietà CSS align-self con il valore flex-end
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
section {
display: flex;
align-items: center;
height: 120px;
padding: 10px;
background: #99caff;
}
div {
height: 60px;
background: #1c87c9;
margin: 5px;
}
div:nth-child(2) {
align-self: flex-end;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Align-self property example</h2>
<p>Here the align-self for the second box is set to "flex-end".</p>
<section>
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
</section>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| auto | L'elemento eredita la proprietà align-items del contenitore genitore. È il valore predefinito. | Provalo » |
| stretch | Fa allungare gli elementi per riempire il contenitore. | Provalo » |
| center | Gli elementi vengono posizionati al centro del contenitore. | Provalo » |
| flex-start | Gli elementi vengono posizionati all'inizio del contenitore. | Provalo » |
| flex-end | Gli elementi vengono posizionati alla fine del contenitore. | Provalo » |
| baseline | Gli elementi vengono posizionati sulla linea di base del contenitore. | Provalo » |
| initial | Fa usare alla proprietà il suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |