Alinhando 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.css
center
Itens centralizados no eixo transversal.
index.html
index.css
flex-start
Todos os itens começam no início do eixo transversal.
index.html
index.css
flex-end
Todos os itens ficam no final do eixo transversal (no final do contêiner flex pai).
index.html
index.css
baseline
Todos os itens flexíveis são alinhados com base na linha de base do conteúdo de texto.
index.html
index.css
1. O que a propriedade align-items
faz?
2. Quais dos seguintes valores podem ser usados com a propriedade align-items
?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
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
Alinhando 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.css
center
Itens centralizados no eixo transversal.
index.html
index.css
flex-start
Todos os itens começam no início do eixo transversal.
index.html
index.css
flex-end
Todos os itens ficam no final do eixo transversal (no final do contêiner flex pai).
index.html
index.css
baseline
Todos os itens flexíveis são alinhados com base na linha de base do conteúdo de texto.
index.html
index.css
1. O que a propriedade align-items
faz?
2. Quais dos seguintes valores podem ser usados com a propriedade align-items
?
Obrigado pelo seu feedback!