Andy Leverenz
January 17, 2021
•Last updated November 5, 2023
Intro to CSS Flexbox - Align Items
CSS align-items sets the default behavior for how flex items are positioned along the cross axis on the current line. Think of this as the justify-content equivalent of the cross-axis relative to flex items within a flex container.
You'll often reach for this property to make the flex items within a parent container all consistently aligned on a baseline or align to top/bottom.
stretch
(default): flex items stretch to fill the container (still respect min-width/max-width)flex-start / start / self-start
: flex items are placed at the start of the cross axis.flex-end / end / self-end
: flex items are placed at the end of the cross axis.center
: flex items are centered in the cross-axisbaseline
: flex items are aligned so their baselines align
Previous
Intro to CSS Flexbox - Flex Wrap
Est. reading time:
42 seconds
Stats:
861 views
Source code:
Source code
Categories
Collection
Part of the CSS Flexbox collection
Products and courses
-
Hello Hotwire
A course on Hotwire + Ruby on Rails.
-
Hello Rails
A course for newcomers to Ruby on Rails.
-
Rails UI
UI templates and components for Rails.