# Flex Stretch CSS: Examples + Illustrations

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

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1636648678132/EHz580gjL.png align="left")

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1636648755052/kvCBeLXLD.png align="left")

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1636648933152/OhVNXsuj7.png align="left")

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