Flex Stretch CSS: Examples + Illustrations

Flex Stretch CSS: Examples + Illustrations

See illustrations to understand stretching in Flexbox

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

1 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

With Flexbox in the default situation (after setting display: flex), you will get this layout if you have set a height on the flex-items:

CSS-Flexbox-Without-Stretching.png

However, if you don't set a height here, the default behavior in Flexbox is actually that the flex-items will stretch vertically:

CSS-Flexbox-With-Stretching.png

When you use flex-direction: column, it switches. Now, the flex-items will stretch horizontally if you don't set a width:

CSS-Flexbox-With-Stretching-Flex-Direction-Column.png

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

 
Share this