# CSS3 Flexbox: Complete Tutorial for Beginners (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 [CSS3 Course](https://bytegrad.com/courses/professional-css?utm_source=blog-post&utm_medium=blog-post&utm_campaign=blog-post).

There are 2 major options in CSS3 to implement layouts: Flexbox & CSS Grid. 

Flexbox is the one you want to use more frequently, in my experience.

It all starts by setting `display: flex` on a parent element:

![CSS3 Flexbox Tutorial.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636653156859/zKVsnQh9e.png)

This is the default layout: flex-items will be sitting on the same row next to each other.

Now we have 'unlocked' the Flexbox functionalities. 

The element with `display: flex` is called the flex-container and its direct child elements are called the flex-items. 

We can now use some Flexbox properties on both the flex-container and flex-items individually.

Let's say we want to center all flex-items horizontally. The `justify-content` property is used here for horizontal alignment:

![CSS3 Flexbox Justify-Content Center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636653283492/NGTFsK0OfL.png)

Or maybe we want it to sit at the end, horizontally:

![CSS3 Flexbox Justify-Content End.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636653339882/vivmFBjXCw.png)

Note that you can also use 'flex-end' instead of 'end'. Flex-end still has better browser support, but the future is 'end' (the properties across Flexbox and CSS Grid are being harmonized -- i.e. the 'flex-' and 'grid-' prefixes will be removed so we have the same properties in both Flexbox & CSS Grid).

So `justify-content` is for horizontal alignment here, now we also want to look at vertical alignment. We can use `align-items` for that:

![CSS3 Flexbox Justify-Content End Align items center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636653416703/uIf1GVhyr.png)

Or if we want the flex-items to be centered both horizontally and vertically:

![CSS3 Flexbox Justify-Content Center Align items center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636653451212/GmcBo01qL.png)

Okay, so we used justify-content for horizontal alignment and align-items for vertical alignment.

Important to understand about Flexbox is that you always work with 1 direction. So the flex-items will always follow 1 particular direction. The default is horizontal (row).

But we can also change the direction to vertical (column):

![CSS Flexbox Default Layout When using flex-direction column (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636653805077/uqXs1kOlP.png)

We used `flex-direction: column` to change the direction. 

The tricky part about this is now that `justify-content` and `align-items` flip.

Justify-content is now for the vertical axis and align-items for the horizontal axis.

Centering the flex-items vertically with `justify-content` now:

![CSS Flexbox centering vertically when flex-direction column with justify-content center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636653973512/asCnOZWtE.png)

And to center them horizontally too, use `align-items` now:

![CSS Flexbox centering vertically and horizontally when flex-direction column with justify-content center and align items center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636654029859/NK4ZgiRNo.png)

This was all for aligning ALL flex-items, but what if we just want to position 1 flex-item in a particular way? Let's go back to the default layout in Flexbox:

![CSS3 Flexbox Tutorial.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636653156859/zKVsnQh9e.png)

So in the default layout, we can use 'align-items' for the vertical alignment. That's for ALL flex-items.

Now we want to align 1 flex-item along the vertical axis. We can do that with `align-self`:

![CSS3 Flexbox Tutorial Align-self center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636654270492/MNCMU-vrF.png)

So just select the individual flex-item and use `align-self`.

That's for the vertical axis. How can we align an individual flex-item along the horizontal axis? Is there a 'justify-self' property as well?

The answer is no. We actually have to use the `margin` property with value `auto`:

![CSS3 Flexbox Tutorial Margin Left Auto.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636654384072/q_VVIR-qQ.png)

So here the margin will take up all the space to the left of the selected flex-item, pushing itself to the right.

Note that also for individual alignment their functionalities switch sides when you use `flex-direction: column`.

To create the gaps between flex-items, you can use the gap properties: `column-gap`, `row-gap` and `gap`. I didn't include it here to keep things simple, so I cheated a bit with the gap in the illustrations.

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