# Display Flex Align Items: Tutorial (Examples)

%[https://youtu.be/_ERtW0z3FF0] 

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).

To start using Flexbox, you only have to use `display: flex` on an element. That will give you this default layout:

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

The element with `display: flex` will become the so-called flex-container, and its direct child elements become the flex-items.

We have now 'unlocked' Flexbox functionalities.

We can then use `align-items` to determine where along the vertical axis all the flex-items should be positioned.

For example, to position them in the center:

![CSS-Flexbox-Display Flex Align Items center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636665495408/93QbG_r9G.png align="left")

Or at the bottom:

![CSS-Flexbox-Display Flex Align Items end.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636665534390/L7tXRMjrt.png align="left")

Note that we used `end` here, but `flex-end` has better browser support. However, `flex-end` is being phased out, because the Flexbox & CSS Grid properties are being harmonized (so we can use the same properties in both systems). So the 'flex-' and 'grid-' prefixes get cut.

When you use `flex-direction: column` to change the direction that the flex-items should follow, things change.

![CSS Flexbox Default Layout When using flex-direction column (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636665658330/dvD6ja0Qp.png align="left")

Now 'align-items' doesn't determine where flex-items should be positioned along the vertical axis, but along the horizontal axis. And the `justify-content` property, that we haven't discussed here yet but is what you would use for horizontal positioning in the default situation, is now used for vertical alignment.

So things 'flip' when you use `flex-direction: column`.

If we now use `align-items: center`, we get this:

![CSS Flexbox Flex direction column align items center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636665800133/JKT4KaF30U.png align="left")

If you just want to align an individual flex-item, you can use `align-self`. An example:

![CSS-Flexbox-Display Flex Align Items center align-self end.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636665879719/qlSsdTZCC.png align="left")

Remember, when `flex-direction: column`, things switch:

![CSS Flexbox Flex direction column align items center align self end.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636665919694/kwKI5hcGo.png align="left")

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).