How to Create a CSS Flexbox Sidebar and Content Layout - Responsive Web Design Tutorial

In this tutorial, we create two responsive sidebar and content layouts with CSS Flexbox.

We'll learn how to create our basic desktop layout and then convert it into a responsive mobile or tablet version using a single media query.

Next, we'll add in a full-width header element at the top of the page while keeping our default sidebar and content layout and its responsive behaviour.

I hope you found this video helpful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible.

TIMESTAMPS:
00:00 Introduction
00:10 Simple sidebar and content layout
03:22 Making our simple layout responsive
06:05 Full-width header, sidebar and content layout
08:42 Making our new layout responsive
09:14 Summary

WATCH NEXT:

[django]

Love the side by side css and html build as well as showing the changes incrementally! Great Video and exactly what I was looking for.

[jakereed]

Your teaching style. I swear I watched this video and it all connected. Like I can design any layout after sitting there stumped for hours, but after this I am no longer struggling to understand flexbox layout. Thank you.

[GR-dleq]

Tom, you're amazing .... found your channel today and I've been binge watching. You have really cleared up my confusion over Flexbox - Thank you!!!!

[weekendpapa]

extremely helpful video, thank you so much

[davisbrown]

Great vid! I was stuck trying to figure this out on my own for a while, but you made the fix seem so simple! Thank you!

[richardyoung]

Wonderful, thanks for a simple but thorough explanation.

[elad]

this is exactly what I needed. i subscribed to your channel

[kostaspolitis]

This should be promoted to all begginers out there

[ardiansyahputra]

Thanks, can you make a full sidebar tutorial?

[rossco]

Hi. Great video.

Can you explain to me exactly what the ‘span’ tag actually does, please?

Cheers!

[lycanunleashed]

please be kind enough to answer a problem i have been facing about flexbox. normal elements (divs) when wrapped in a flex container will display horizontally but when a div containing 5 <a href> <img> </a> tags (img wrapped inside a tags) is made a flex container all the anchor tags are stacked on top of each other instead of being displayed horizontally which is their default behaviour anyways both are inline. so why does this happen ??

[maxlevelcoder]

if anyone want your sidebar Minimize with Content area, Replace the Sidebar min-width: 300px ; to flex-grow : 1; and remove flex-grow give min-width of 80% to content or You can directly change the value of sidebar min-width to 20% no need remove flex-grow in content