# Vertical Align with Flexbox: 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](https://bytegrad.com/courses/professional-css?utm_source=blog-post&utm_medium=blog-post&utm_campaign=blog-post).

The default layout in Flexbox is this:

![CSS-Flexbox-Default-Layout.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636585850915/hWxP6Y9t0.png align="left")

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1636585961451/XbyY8VGYy.png align="left")

With `align-items: end`:

![CSS Flexbox Align-Items End.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636586080114/uI_BPQodyi.png align="left")

Note that `align-items: flex-end` still has [better support](https://caniuse.com/?search=align-items%20end). 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1636586362532/p86RukMr3.png align="left")

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

![CSS Flexbox Align-Self-start.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636586398386/iJXDOIJBP.png align="left")

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1636586624301/cVGaYi-eD.png align="left")

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

![CSS Flexbox vertical align with margin_ auto.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636586721364/VBKIMOkKc.png align="left")

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](https://bytegrad.com/courses/professional-css?utm_source=blog-post-2&utm_medium=blog-post-2&utm_campaign=blog-post-2) 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](https://email.bytegrad.com).

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

[Facebook](https://www.facebook.com/ByteGrad)[Twitter](https://twitter.com/bytegradcom)[Instagram](https://www.instagram.com/bytegradcom/)