Ian McNally

Grid layouts in flex box

February 26, 2015

Some colleagues brought up layouts today. The team just started using flex box instead of Bootstrap’s grid (yey!), and someone mentioned this article:

Don’t use flexbox for page layout

So, I created a pen to try and prove Jake wrong (no offense, Jake):

My pen

By using flex-basis, I effectively set a min width for the containers that shouldn’t grow. Then the main container fills the rest of the space. For content in the main container, you could just have a max-width container.

Ian McNally

Hey, I'm Ian. I build websites and write about what I learn as I go. Follow me on Twitter.