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:

https://gist.github.com/davidsword/e2d6588d55a2f69b498e356f006e23c5


Leave a Reply

Your email address will not be published. Required fields are marked *