CSS Flex Align Vertical: Tutorial (Examples + Illustrations)

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.

To understand vertical aligning in Flexbox, let's start from the default layout in Flexbox:

CSS-Flexbox-Default-Layout (2).png

We can use align-items to determine where along the vertical axis all flex-items should sit. For example, if we want them to sit in the center:

CSS-Flexbox-Vertical Align with align-items center.png

Or maybe we want them all to sit at the bottom:

CSS-Flexbox-Vertical Align with align-items end.png

Note that we used the value 'end' here, but 'flex-end' still has better browser support. However, 'flex-end' is being phased out and the future is 'end'. This is because Flexbox and CSS Grid are being harmonized so that we can use the same properties in both systems, so the 'flex-' and 'grid-' prefixes are being dropped.

This was for aligning ALL flex-items vertically, but what if we just want to vertically align an individual flex-item? We can use align-self for that:

CSS-Flexbox-Vertical Align with align-self center (1).png

Or use align-self: end to make it sit at the bottom:

CSS-Flexbox-Vertical Align with align-self end.png

Note that when you use flex-direction: column, the 'align'-properties will now work for the horizontal axis instead of the vertical axis.

This is the default layout when you use flex-direction: column:

CSS Flexbox Default Layout When using flex-direction column (2).png

Then you need to use justify-content to do vertical alignment for all flex-items:

CSS Flexbox centering vertically when flex-direction column with justify-content center (2).png

Or for 1 individual flex-item, use 'margin' with 'auto':

CSS Flexbox Flex direction column Align Flex item to the bottom with margin auto (1).png

The margin will now take up the space on top of the selected element, pushing itself downwards.

So there is no 'justify-self' property in Flexbox, because 'margin: auto' already takes care of what we want. Which is a bit confusing... I wish we had 'justify-self' in Flexbox.

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.

CSS Flex Align Vertical: Tutorial (Examples + Illustrations)

Comments

More from this blog

CSS3 Border Box (Example + Illustration)

Flexbox Properties: Most Common + Rare Properties

Flexbox Spacing Between Items: Examples

Flex Container HTML: Example

Flexbox Examples: Most Common Layouts (+ Illustrations)

Command Palette

Comments

More from this blog