CSS Academy · Aula

Substituição do Alinhamento de Itens Flex com align-self

Substitua o align-items do contêiner para itens flex individuais usando align-self.

Aula 1 de 413 etapas

Substituição do Alinhamento de Itens Flex com align-self é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que é align-self?

align-self substitui a configuração align-items do contêiner flexível para um item flexível específico. Ele se aplica a itens individuais, não ao contêiner.

Valores de align-self

Aceita os mesmos valores que align-items:

auto — herda o valor de align-items do contêiner (padrão)
flex-start — alinha ao início do eixo transversal
flex-end — alinha ao fim do eixo transversal
center — centraliza no eixo transversal
stretch — estica para preencher o tamanho transversal
baseline — alinha as linhas de base do texto

Exemplo prático

Uma navegação em que a maioria dos itens está centralizada, mas o último botão está alinhado ao final:

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

Esticando um item

Faça um cartão ocupar toda a altura enquanto os outros se ajustam ao próprio conteúdo:

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

margin: auto como alinhamento

As margens automáticas em itens flexíveis empurram o próprio item ou seus elementos irmãos para o lado oposto. Essa é uma alternativa poderosa a align-self para centralizar ou distribuir espaço.

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

margin: auto para centralização vertical

As margens automáticas também funcionam verticalmente. margin-top: auto dentro de um contêiner flexível em coluna empurra um elemento para a parte inferior:

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

Alinhamento pela linha de base

Alinhar itens pela linha de base do texto mantém relações legíveis entre itens de tamanhos diferentes:

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto (padrão)

align-self: auto informa ao item que ele deve utilizar o valor de align-items do contêiner. Só é necessário definir align-self quando você deseja afastar-se do padrão do contêiner.

Eixo transversal versus eixo principal

Lembre-se: align-self sempre atua no eixo transversal. Se flex-direction: column, o eixo transversal é horizontal; portanto, align-self controla o posicionamento à esquerda e à direita.

Combinando align-self com flex-grow

Um padrão comum: fazer um item crescer para preencher o espaço e substituir também seu alinhamento transversal:

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

Alinhamento de Grid e Flexbox

CSS Grid possui tanto align-self (eixo das linhas) quanto justify-self (eixo das colunas) para controle 2D. O align-self do Flexbox controla apenas o eixo transversal; utilize margin: auto para o eixo principal.

Verificação rápida

Um contêiner flexível tem align-items: center. Um item precisa ser alinhado ao topo do eixo transversal. Qual propriedade você deve definir nesse item?

Responda na aula interativa

Recapitulação

align-self substitui align-items do contêiner flexível para itens individuais. Utilize-o para alterar o padrão de alinhamento de elementos específicos. margin: auto é uma ferramenta complementar que distribui o espaço restante para empurrar itens ao longo de qualquer eixo.

Grátis para começar

Aprenda CSS com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 40
Aulas: 159

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Substituição do Alinhamento de Itens Flex com align-self” é grátis?

Sim — o texto completo de “Substituição do Alinhamento de Itens Flex com align-self” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Substituição do Alinhamento de Itens Flex com align-self”?

Substitua o align-items do contêiner para itens flex individuais usando align-self. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Substituição do Alinhamento de Itens Flex com align-self”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Substituição do Alinhamento de Itens Flex com align-self
Propriedade order e Reordenação Visual
Padrões da Forma Abreviada de flex
Layouts Flexbox Comuns: Navegação, Cartões e Objetos de Mídia

← Voltar para CSS Academy