Hello Fellow Codenewbies 👋

By default, flex is stretching the height of the items based on the highest item.

But when we need to, we can control the vertical position (cross axis) of the items with align-items.

Controlling The Vertical Position of Flex Items

align-items property is good to be applied when we have an element that has background color/shadow/borders so we can see the effect.

The Values of `align-items`

flex-start

It aligns the items on the top (start) of the flex container, and the height of each item is maintained as it is.
⭐ This value is used most often to control the vertical position of flex items.

center

It aligns the items vertically on the center of the flex container.

flex-end

It aligns the items on the bottom (end) of the flex container.

stretch

This is the default value of align-items.
It stretches the height of the items based on the highest item.
Usually, it is used if we need to reset or override an applied value.

baseline

It aligns the items based on the first line of texts to be in line with each other.
This value is barely used and we only can see the effect when we have elements with text in them.

Playground

I provide here the Codepen for you to play around with.

https://codepen.io/adiati/pen/eYdZYWO

Conclusion

align-items property works with cross axis (vertical position) and is used when we want or need to control the vertical position of flex items in a flex container.
The values of align-items that we need to know are:
- flex-start
- center
- flex-end
- stretch (default)
- baseline

CSS Flexbox: align-items

Comments

Start To Think Responsive In CSS

CSS: Media Queries

More from this blog

I Was Skeptical of AI. Then It Saved Me Hours of Writing.

From Helping Out to Taking Ownership: The Art of Sticking Around

The Curated, Automated Open Source Portfolio: How It’s Going

Open Source Engagement: What's Working Now?

Beyond Hacktoberfest: Building a True Open Source Journey

Controlling The Vertical Position of Flex Items