Propriedade CSS align-self
A propriedade align-self define o alinhamento dos itens selecionados no contentor. Experimente alguns exemplos com os seus valores.
A propriedade CSS align-self alinha os itens selecionados dentro da linha flex atual e substitui os valores de align-items.
A propriedade align-self é uma das propriedades CSS3.
A propriedade align-self aceita os mesmos valores que a propriedade align-items:
- auto
- stretch
- flex-start
- flex-end
- center
- baseline
Esta propriedade será ignorada se uma margem vertical de um item flex estiver definida como "auto". A propriedade align-self não se aplica a células de tabela nem a caixas ao nível de bloco.
| Valor inicial | auto |
|---|---|
| Aplica-se a | Itens flex, itens grid e caixas com posicionamento absoluto. |
| Herdada | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.alignSelf = "auto"; |
Sintaxe
Sintaxe da propriedade CSS align-self
align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;Exemplo da propriedade align-self:
Exemplo da propriedade CSS align-self com o valor 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>Resultado
Eis um exemplo em que são utilizadas três caixas e a segunda é especificada com o valor "flex-end".
Exemplo da propriedade align-self com o valor "flex-end":
Exemplo da propriedade CSS align-self com o valor 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>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| auto | O item herda a propriedade align-items do seu contentor pai. Este é o valor predefinido. | Experimente » |
| stretch | Faz com que os itens se estiquem para preencher o contentor. | Experimente » |
| center | Os itens são colocados no centro do contentor. | Experimente » |
| flex-start | Os itens são colocados no início do contentor. | Experimente » |
| flex-end | Os itens são colocados no fim do contentor. | Experimente » |
| baseline | Os itens são posicionados na linha de base do contentor. | Experimente » |
| initial | Faz com que a propriedade utilize o seu valor predefinido. | Experimente » |
| inherit | Herda a propriedade do seu elemento pai. |