Flexbox Layout – Sidebar & Content Fixed With Fluid Backgrounds

Flexbox Layout – Sidebar & Content Fixed With Fluid Backgrounds

At the time of writing this, this is what I currently have built my site on. It’s inspired by Twenty Fifteen’s layout, but in my humble opinion, uses better CSS logic for similar results.

Basically, this layout has a max-width 1,175 px (I’ve set those bounds with red lines in #goal for reference only, it doesn’t actually contribute), however the sidebar and main content areas are still edge-to-edge flex – and the ratio remains the same.

I’ve never really got into flex box, but it’s amazing. I quickly found flex-bias and this will keep the boxes in the same ratio, we then house an inner container to relate to our fixed max-width. And, well the code will explain better:


Leave a Reply

%d bloggers like this: