Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Alinhando Itens Verticalmente no Flexbox | Dominando o Flexbox para Layouts
Fundamentos de CSS

bookAlinhando Itens Verticalmente no Flexbox

A propriedade align-items controla o alinhamento vertical dos itens flex. Seu valor padrão é stretch.

align-items: stretch | center | flex-start | flex-end | baseline;

Veja os exemplos a seguir para entender onde essa propriedade é necessária.

stretch

Indica que os itens são estendidos por todo o comprimento do eixo transversal.

index.html

index.html

index.css

index.css

copy

center

Itens centralizados no eixo transversal.

index.html

index.html

index.css

index.css

copy

flex-start

Todos os itens começam no início do eixo transversal.

index.html

index.html

index.css

index.css

copy

flex-end

Todos os itens ficam no final do eixo transversal (no final do contêiner flex pai).

index.html

index.html

index.css

index.css

copy

baseline

Todos os itens flexíveis são alinhados com base na linha de base do conteúdo de texto.

index.html

index.html

index.css

index.css

copy

1. O que a propriedade align-items faz?

2. Quais dos seguintes valores podem ser usados com a propriedade align-items?

question mark

O que a propriedade align-items faz?

Select the correct answer

question mark

Quais dos seguintes valores podem ser usados com a propriedade align-items?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 4

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you explain the difference between align-items and justify-content?

Can you show visual examples of each align-items value?

When should I use each align-items value in a real project?

Awesome!

Completion rate improved to 2.56

bookAlinhando Itens Verticalmente no Flexbox

Deslize para mostrar o menu

A propriedade align-items controla o alinhamento vertical dos itens flex. Seu valor padrão é stretch.

align-items: stretch | center | flex-start | flex-end | baseline;

Veja os exemplos a seguir para entender onde essa propriedade é necessária.

stretch

Indica que os itens são estendidos por todo o comprimento do eixo transversal.

index.html

index.html

index.css

index.css

copy

center

Itens centralizados no eixo transversal.

index.html

index.html

index.css

index.css

copy

flex-start

Todos os itens começam no início do eixo transversal.

index.html

index.html

index.css

index.css

copy

flex-end

Todos os itens ficam no final do eixo transversal (no final do contêiner flex pai).

index.html

index.html

index.css

index.css

copy

baseline

Todos os itens flexíveis são alinhados com base na linha de base do conteúdo de texto.

index.html

index.html

index.css

index.css

copy

1. O que a propriedade align-items faz?

2. Quais dos seguintes valores podem ser usados com a propriedade align-items?

question mark

O que a propriedade align-items faz?

Select the correct answer

question mark

Quais dos seguintes valores podem ser usados com a propriedade align-items?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 4
some-alt