Vertical Align with Flexbox: Examples + Illustrations

Vertical Align with Flexbox: Examples + Illustrations

See illustrations to understand how to vertically align flex-items in CSS

Wesley (ByteGrad)'s photo
Wesley (ByteGrad)
·Nov 10, 2021·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

You need to master both Flexbox and CSS Grid in order to professionally build modern websites & web apps. If you haven't mastered both of them yet, I highly recommend going through my CSS Course.

Group 20.png

The default layout in Flexbox is this:

CSS-Flexbox-Default-Layout.png

The flex-items will sit along the same row, starting from the top-left corner.

Now, we can use align-items to determine where they should sit along the vertical axis.

This is with align-items: center:

CSS Flexbox Align-Items Center.png

With align-items: end:

CSS Flexbox Align-Items End.png

Note that align-items: flex-end still has better support. CSS Grid and Flexbox are being harmonized, meaning the values will be the same across both Flexbox and CSS Grid, so the 'flex-' prefix is getting dropped, but it will take some time before browser support for 'end' is as good as 'flex-end'.

Note that if you have multiple rows (after flex-items wrapping), you should use align-content instead of align-items.

Let's say we want all flex-items to be centered vertically, but 1 flex-item should sit at the bottom. We can use align-self to determine the individual vertical alignment of a flex-item:

CSS Flexbox Align-Self-End.png

Or use align-self: start to make it sit at the top:

CSS Flexbox Align-Self-start.png

If you change the flex-direction to column, things change. Now, the align-items and align-self properties will align the flex-items along the horizontal axis, instead of the vertical axis.

Now, the justify-content property will align flex-items along the vertical axis:

CSS Flexbox vertical align with justify-content_ center.png

If we want a particular flex-item to deviate from this, we can use margin: auto:

CSS Flexbox vertical align with margin_ auto.png

Now margin will take up the space between the third element and other elements, pushing itself to the bottom and the other ones to the top.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram

Did you find this article valuable?

Support Wesley (ByteGrad) by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this