Published: September 19, 2018
Simple Flexbox Layout for Sidebar + Main Content Area
It does what it says on the tin.
When I need to create a layout for a sidebar and main content area, I usually create a container div to hold them, then two elements inside it <aside> for the sidebar and <main> for the main content. Then I use display: flex; on the container and set the sidebar to width: 25%; and the main area to width: 75%; (or 33% and 67%, for example). This works fine.
However, I'm not sure why I haven't just been going for full-blown flexbox, setting the sidebar to flex: 1; and the main area to flex: 3; meaning I am granting the space 4 units and I want the side bar to take up one of them and the main area to take up 3 of them. If using a 12 column grid approach, it is the same thing to set the sidebar as flex: 3; and the main area as flex: 9;.
Here's a small codepen to illustrate it.
See the Pen Simple Flexbox Layout for Sidebar + Main Content Area by Mark Conroy (@markconroy) on CodePen.