# Make Flex-Items Wrap Onto a New Column

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 need to use `flex-direction: column` together with `flex-wrap: wrap` to make flex-items wrap onto a new column. Here's an example from [another article](https://blog.bytegrad.com/three-columns-with-flex-box-in-css-examples) I wrote:

![CSS-Flexbox-Create-Multiple-Columns.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636566091077/tx-5DPwI0.png)

That's because Flexbox works with 1 direction: either horizontal (row) or vertical (column). 

The default is horizontal (row), so when there is not enough space left for an additional flex-item it will wrap onto a new row (if you have set `flex-wrap` to `wrap`, otherwise it will overflow the container).

To change the direction to vertical (column), set `flex-direction` to `column`. Then, when there is not enough space left for an additional flex-item it will wrap onto a new column (if you have set `flex-wrap` to `wrap`, otherwise it will overflow the container).

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