# Flex Right Align One Item: Illustration (Example)

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

Simply use `margin-left: auto` on the flex-item you want to align to the right:

![CSS Flex Right Align One Item (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636571625694/vZDvqjiAw.png)

If you have multiple flex-items next to that element, it will also align those to the right:

![CSS Flex Right Align Multiple Items.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636571692245/RJz8OgavY.png)

How it works is that 'margin' will take up all the available space to the left, pushing the element itself to the right.

This functionality is also why Flexbox doesn't have a `justify-self` property, because `margin: auto` already does the trick, although maybe it should be included to reduce confusion.

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