# Flexbox Layout Examples: Most Common Layouts

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

This is the default layout in Flexbox:

![CSS Flexbox default layout (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636669771912/-fRNvjOQ7.png align="left")

You set `display: flex` on an element. This makes that element the so-called flex-container and its direct child elements the so-called flex-items.

The flex-items are laid out horizontally next to each other, starting from the top-left corner.

Sometimes this is all you need.

However, let's say we want to position these flex-items differently. We have 2 major options: we can position them along the horizontal axis or the vertical axis.

To position the flex-items along the horizontal axis, use `justify-content` here:

![CSS Flexbox default layout justify-content center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636670208138/0Fq9TentA.png align="left")

or

![CSS Flexbox default layout justify-content end.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636670230939/FU0hJSLZy.png align="left")

Note that `flex-end` has better browser support at time of writing, but is being phased out in favor of `end`. This is because Flexbox and CSS Grid properties are being harmonized, so we can use the same properties in both systems. That's why the 'flex-' and 'grid-' prefixes are being dropped.

We can also align the flex-items vertically with `align-items`:

![CSS Flexbox justify-content center and align items center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636670354575/MXC0xmYB9.png align="left")

or

![CSS Flexbox justify-content center and align items end.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636670373015/zMqbQn_Nq.png align="left")

With Flexbox, the flex-items are always laid out along 1 direction: horizontal (row) or vertical (column). The default is horizontal (row).

However, sometimes we want it to be vertical (column):

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

When you do that, the `align-items` and `justify-content` properties 'flip', so now `justify-content` works 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/v1636670473849/K_ZeLfyU1.png align="left")

![CSS Flexbox flex direction column with align-items center and justify-content end.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636670491076/X-y4srgtj.png align="left")

Sometimes, we only want to position 1 flex-item in a certain way, not all flex-items. We can do that by selecting that individual flex-item and using `align-self` instead of `align-items`:

![CSS Flexbox display flex align-self center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636670546158/9jMNmJrOT.png align="left")

For the other axis, there is no `justify-self`. Instead we should use `margin: auto`:

![CSS Flexbox display flex margin auto (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636670583288/SYcF36pOD.png align="left")

Here, margin will take up all the space left to the flex-item, pushing the flex-item itself all the way to the right.

Sometimes, you will have more flex-items than here or just a few very large ones. In that case, they may overflow the container or stretch the container out. Instead of that, you probably want them to wrap onto a new line if they don't fit.

Use `flex-wrap: wrap` to do that:

![CSS Flexbox flex wrap wrap.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636670685489/HN6Z-5jO8.png align="left")

Here we have multiple rows now. If we want to center all of this vertically like before, we now have to use `align-content` instead of `align-items`:

![CSS Flexbox flex wrap wrap and align-content center.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636670760219/IGop1Lr5w.png align="left")

So use `align-items` when you have 1 row or column, use `align-content` when you have multiple rows or columns (after wrapping).

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