Aligning 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.css
center
Items are in the center of the cross axis.
index.html
index.css
flex-start
All items start at the beginning of the cross axis.
index.html
index.css
flex-end
All items are in the end of the cross axis (in the end of the parent flex container).
index.html
index.css
baseline
All flex items are aligned based on their text content baseline.
index.html
index.css
1. What does the align-items
property do?
2. Which of the following values can be used with the align-items
property?
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.5
Aligning Items Vertically in Flexbox
Scorri per mostrare il 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.css
center
Items are in the center of the cross axis.
index.html
index.css
flex-start
All items start at the beginning of the cross axis.
index.html
index.css
flex-end
All items are in the end of the cross axis (in the end of the parent flex container).
index.html
index.css
baseline
All flex items are aligned based on their text content baseline.
index.html
index.css
1. What does the align-items
property do?
2. Which of the following values can be used with the align-items
property?
Grazie per i tuoi commenti!