# Nested Flexbox: 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).

You can nest Flexbox without problem. It works exactly as expected.

An example:

```plaintext
<div class="container">
  <ul class="list">
    <li class="list__item">List item 1</li>
    <li class="list__item">List item 2</li>
  </ul>
</div>
```

```plaintext
.container {
  height: 500px;
  width: 500px;
  background-color: rgb(233, 236, 237);
            
  display: flex;
  justify-content: center;
  align-items: center;
}

.list {
   display: flex;
   column-gap: 50px;
}
```

Which produces this:

![nested flexbox example.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636669006493/Dem2A-Z-d.png align="left")

The list element is a flex-item in relation to the container, **but it is also a flex-container in relation to its own child elements**.

This works as expected, no problem.

This is because Flexbox is always about a flex-container and its direct child elements (so only the child elements that are a direct descendant in the HTML tree).

And a child element can be both a flex-item in relation to its parent, and it can be a flex-container itself in relation to its own direct child elements.

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