Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Aligning Items Vertically in Flexbox | Mastering Flexbox for Layouts
CSS Fundamentals

bookAligning Items Vertically in Flexbox

The align-items property governs the vertical arrangement of flex items. Its default value is stretch.

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

Let's run the following examples to get where do we need it.

stretch

It means that we extend items to the entire length of the cross axis.

index.html

index.html

index.css

index.css

copy

center

Items are in the center of the cross axis.

index.html

index.html

index.css

index.css

copy

flex-start

All items start at the beginning of the cross axis.

index.html

index.html

index.css

index.css

copy

flex-end

All items are in the end of the cross axis (in the end of the parent flex container).

index.html

index.html

index.css

index.css

copy

baseline

All flex items are aligned based on their text content baseline.

index.html

index.html

index.css

index.css

copy

1. What does the align-items property do?

2. Which of the following values can be used with the align-items property?

question mark

What does the align-items property do?

Select the correct answer

question mark

Which of the following values can be used with the align-items property?

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

Awesome!

Completion rate improved to 2.5

bookAligning Items Vertically in Flexbox

Deslize para mostrar o menu

The align-items property governs the vertical arrangement of flex items. Its default value is stretch.

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

Let's run the following examples to get where do we need it.

stretch

It means that we extend items to the entire length of the cross axis.

index.html

index.html

index.css

index.css

copy

center

Items are in the center of the cross axis.

index.html

index.html

index.css

index.css

copy

flex-start

All items start at the beginning of the cross axis.

index.html

index.html

index.css

index.css

copy

flex-end

All items are in the end of the cross axis (in the end of the parent flex container).

index.html

index.html

index.css

index.css

copy

baseline

All flex items are aligned based on their text content baseline.

index.html

index.html

index.css

index.css

copy

1. What does the align-items property do?

2. Which of the following values can be used with the align-items property?

question mark

What does the align-items property do?

Select the correct answer

question mark

Which of the following values can be used with the align-items property?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

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