# Flexbox Examples: Most Common Layouts (+ 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).

To 'unlock' the functionalities of Flexbox, simply pick an element and use `display: flex`:

![CSS Flexbox default layout (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636671993288/RPJBGEtxT.png)

This will give you the default layout.

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

The flex-items are laid out horizontally next to each other in the default layout.

We can position these flex-items somewhere else, horizontally or vertically.

For example, horizontally we can do this by using `justify-content`:

![CSS Flexbox default layout justify-content center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636672071024/lg5KPRwck.png)

![CSS Flexbox default layout justify-content end.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636672075626/XGV6RQcmR.png)

And vertically we can use `align-items`:

![CSS Flexbox justify-content center and align items center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636672110601/yGfWK7K3f.png)

![CSS Flexbox justify-content center and align items end.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636672114801/Ww0-3lWv-.png)

Notice how the flex-items now always flow horizontally, they go from left to right.

Sometimes we want them to flow vertically, from top to bottom.

We can do that with `flex-direction: column`:

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

Then we can use `justify-content` and `align-items` again to position them differently, **however now their axes have 'flipped'**.

So now you need to use `justify-content` for the **vertical** axis and `align-items` for the **horizontal axis**:

![CSS Flexbox flex direction column with align-items center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636672220659/oeV-LHzUL.png)

![CSS Flexbox flex direction column with align-items center and justify-content end.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636672227489/QqnDCPcYt.png)

Sometimes we just want to move 1 flex-item to a different position.

Select that one element and use `align-self` or `margin: auto`:

![CSS Flexbox display flex align-self center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636672259893/Z2Omx1XZb.png)

![CSS Flexbox display flex margin auto (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636672272758/WkQvl-IiK.png)

Also, if you have many flex-items or very large flex-items such that they do not fit, they will overflow the container or stretch the container out. You can make them wrap with `flex-wrap: wrap`:

![CSS Flexbox flex wrap wrap.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636672311616/W3ULTvGoB.png)

And now if you want to position everything along the vertical axis, you should use `align-content` instead of `align-items` (use align-content when you have multiple rows/columns like we have now after wrapping):

![CSS Flexbox flex wrap wrap and align-content center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636672355201/BpkP0l54O.png)

I cheated a bit in the illustrations by giving the flex-items some space between them. In practice you need to use one of the gap properties to achieve that: `column-gap`, `row-gap` or `gap`.

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