# Using Flex CSS: Most Important Concepts (Examples)

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

A common example of using Flexbox is this:

![CSS-Using-Flex-Example.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636569686103/CXRGG3BCm.png)

There is a parent-element and its 3 child-elements. 

We set `display: flex` on the parent-element. This 'unlocks' the Flexbox functionalities and it automatically makes this element the so-called flex-container and its direct child-elements the so-called flex-items.

The default behavior is that the 3 flex-items will be sitting next to each other horizontally.

We used `justify-content: center` to center all flex-items horizontally.

If we also want to center them vertically, we can use `align-items: center`:

![CSS-Using-Flex-Example-Centering-Both-Horizontally-And-Vertically.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636569893351/G2dS2PUgI.png)

Note the gaps between the flex-items in the illustrations. In practice you need to use `gap: 5px` on the flex-container to do that.

The important thing to understand about Flexbox - and what it differentiates from CSS Grid - is that with Flexbox you always work with 1 direction: either the horizontal (row) direction or the vertical (column) direction. The default direction is horizontal (row).

But sometimes we want it to be vertical, just change the `flex-direction` to `column`:

![CSS-Using-Flex-Example-Flex-Direction-Column (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636570441218/etTAE0hFT.png)

The tricky part comes when we now want to center this.

When you use `flex-direction: column` the `justify-content` and `align-items` properties 'flip', so now `justify-content` works for the vertical axis and the `align-items` property works for the horizontal axis:


![CSS-Using-Flex-Example-Flex-Direction-Column-Align-Items-Center (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636570447995/8BWfliAYG.png)

And to also center them vertically now:

![CSS-Using-Flex-Example-Flex-Direction-Column-Align-Items-And-Justify-Content-Center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636570387192/7FrMoDn7c.png)

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