Propriedade CSS align-self

A propriedade CSS align-self alinha um único item flex ou grid ao longo do eixo transversal do seu contêiner, substituindo o valor de align-items definido no contêiner.

Enquanto align-items alinha todos os itens do contêiner de uma vez, align-self permite destacar um único item e alinhá-lo de forma diferente. Esta é a propriedade que você usa quando um elemento precisa fugir do padrão — por exemplo, fixar um logotipo no topo de uma linha de cabeçalho enquanto os demais itens permanecem centralizados verticalmente.

align-self só funciona quando o item está dentro de um contêiner flex, um contêiner grid ou está posicionado de forma absoluta. Em um elemento de bloco simples ela não tem efeito, motivo pelo qual um valor como stretch não funciona até que você defina display: flex (ou grid) no elemento pai. É uma das propriedades CSS3.

Como se relaciona com align-items

A relação é "contêiner vs. item":

align-items é definido no contêiner e alinha todos os itens ao longo do eixo transversal.
align-self é definido em um item individual e substitui o que o align-items do contêiner determina para aquele item específico.

Como align-self aceita os mesmos valores que align-items, você só precisa aprender o conjunto de valores uma vez. O valor padrão auto simplesmente significa "usar o valor de align-items do contêiner", então um item sem align-self segue o comportamento geral.

Informação

align-self é ignorado quando o item flex possui uma margem vertical auto (a margem automática prevalece e absorve o espaço livre). Também não tem efeito em células de tabela ou em caixas de bloco independentes que não são itens flex/grid.

Valor Inicial	auto
Aplica-se a	Itens flex, itens grid e caixas posicionadas de forma absoluta.
Herdado	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>

Experimente Você Mesmo »

Resultado

O align-items: center do contêiner mantém as caixas #2 e #3 centralizadas verticalmente, enquanto a caixa #1 — com align-self: flex-start — sobe para o topo, substituindo o valor do contêiner apenas para ela mesma.

Aqui está um exemplo onde três caixas são usadas 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>

Experimente Você Mesmo »

Exemplo com o valor "stretch":

Por padrão, um item flex ocupa apenas a altura que seu conteúdo necessita. Definir align-self: stretch em um item faz com que esse único item cresça para preencher toda a extensão transversal do contêiner, enquanto os demais mantêm sua altura natural. Para que o stretch funcione, você deve deixar o height do item sem definição (ou auto).

<!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: stretch;
        height: auto;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "stretch".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

align-self no CSS Grid

align-self não é exclusivo do Flexbox — funciona da mesma forma dentro de um contêiner grid, alinhando um item grid ao longo do eixo de bloco (coluna) de sua área de grid:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center; /* default for every item */
}
.grid .featured {
  align-self: start; /* this one item hugs the top of its cell */
}

No grid, as palavras-chave start e end são usadas em vez de flex-start e flex-end, mas o conceito é idêntico: o contêiner define um padrão com align-items, e align-self o substitui por item.

Quando usar align-self

Um item diferente dos demais. A maioria dos itens deve se alinhar de uma forma, mas um único elemento (um ícone, um emblema, uma chamada para ação) precisa de uma posição diferente.
Fixação no topo ou na base em uma linha centralizada. Uma barra de navegação que centraliza verticalmente seus links, mas fixa um logotipo no topo.
Deixar um cartão se expandir. Em uma linha de cartões de altura igual, force apenas um a preencher a altura com align-self: stretch.

Se todos os itens precisarem do mesmo alinhamento, defina align-items no contêiner — isso é mais limpo do que repetir align-self em cada filho.

Valores

Valor	Descrição	Experimente
auto	O item herda a propriedade align-items do contêiner pai. Este é o valor padrão.	Experimente »
stretch	Faz os itens se expandirem para preencher o contêiner.	Experimente »
center	Os itens são posicionados no centro do contêiner.	Experimente »
flex-start	Os itens são posicionados no início do contêiner.	Experimente »
flex-end	Os itens são posicionados no final do contêiner.	Experimente »
baseline	Os itens são posicionados na linha de base do contêiner.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Prática

O que a propriedade 'align-self' no CSS faz?

Permite que o alinhamento padrão, ou o especificado por align-items, seja substituído para itens flex individuais.É usada para alterar a cor de fundo de um elemento.Cria uma nova camada na página da web.Alinha itens flex ao longo da linha vertical dentro de seus contêineres.

Propriedades relacionadas

align-items — a versão desta propriedade no nível do contêiner.
align-content — alinha as linhas de um contêiner flex de múltiplas linhas.
justify-content — alinha os itens ao longo do eixo principal.
flex-direction — define qual eixo é o eixo principal (e portanto qual o align-self controla).
O Guia Definitivo de Flexbox — como todas as propriedades de alinhamento flex se encaixam.