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-axis -
baseline: flex items are aligned so their baselines align
New to HTML + CSS? Check out my new course Hello HTML & CSS
Hello HTML + CSS is a course designed to help you learn HTML & CSS from scratch.
Top comments (0)