HTML & CSS
/Intermediate
align-items
Definition
A flexbox container property that defines the default behavior for how flex items are laid out along the cross-axis (vertical by default).
Explain Like I'm New
If `justify-content` handles Horizontal alignment, `align-items` handles Vertical alignment. Do you want the items pushed to the ceiling? Pushed to the floor? Vertically centered perfectly in the middle?
Real World Example
Centering an icon next to a large line of text. Without Flexbox, the icon might float weirdly near the top of the text. With `align-items: center`, the icon and the text perfectly lock into vertical alignment.
Common Use Cases
- •Vertically centering elements (The Holy Grail of CSS)
Interactive Example
Interview Questions
basic
- What value centers items vertically?
intermediate
- What is the default value of `align-items`?