Flexbox No Wrap Explained (Example)

Flexbox No Wrap Explained (Example)

See illustration to understand Flexbox no wrap

Wesley (ByteGrad)'s photo
Wesley (ByteGrad)
·Nov 10, 2021·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

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.

Group 20.png

Using Flexbox with a few flex-items is straightforward:

CSS-Flexbox-Nowrap.png

But now let's say you have many flex-items or very large flex-items that don't really fit on the same line, what happens? Well, they will flow outside the flex-container:

CSS-Flexbox-Nowrap-Overflow.png

This is because the default is flex-wrap: nowrap.

I actually don't know why this is the default value, I think most of the time you want them to wrap onto a new line:

CSS-Flexbox-Nowrap-Overflow-Flex-Wrap-Wrap.png

Simply use flex-wrap: wrap to achieve this.

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

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram

Did you find this article valuable?

Support Wesley (ByteGrad) by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this