Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre 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

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.5

bookAligning Items Vertically in Flexbox

Glissez pour afficher le 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

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 4
some-alt