Published: Wed 19 Sep 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.

If you like what I write, you might like to follow me on Twitter @markconroy

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.