Flexbox two column layout

Lori 2 Lori * rocks

Published:

Finally I've made new layout for the blog. I've decided to use Flexbox because it's ability to dynamically change the layout for different screen resolutions.

As an exercise, first I've implemented flex layout to display links to posts as cards. The old layout looked like that:

Layout with cards

As you can see, it didn't work 100% correctly and I've described the issue on Stackoverflow. The issue is not resolved until now.

Now I want to stick to more traditional kind of layout with two areas: main and aside. On desktop-size screens they are displayed as columns where aside has fixed width and main is flexible taking all the space left by aside. On mobile screens (< 600px) they change to rows, with main on top of aside. You can see the result on the home page of my blog.

The sample code is available on Codepen(resize the window to see the layout change):

See the Pen Flexbox fixed aside by Dori (@lori2lori) on CodePen.

First, I've setup flex items to be displayed as multiple rows using flex-flow: row-reverse wrap. I also reversed the items because in html main appears after aside.

I've designed the mobile layout as a default (it's called mobile-first design), with flex assigned to 0 (flex-grow ) and to 100% (flex-basis). That will make both main and aside take 100% of the container width. Because I've set flex-flow to wrap, this will make the two elements display as rows.

main, aside {
  flex: 0 100%;
}

Next, I've used media queries to create desktop layout (for screens with minimal width set to 600px). The aside area should have fixed width of 200px (this can be achieved by setting flex-basis to 200px).

I've also made main to have flexible width by setting flex-grow to 1. This way it will take all the space left by aside.

@media (min-width: 600px) {
  main {
    flex: 1 0 0px;
  }
  aside {
    flex: 0 0 200px;
  }
}