Don’t forget to use flexbox flex units

In a recent web design project for a client, I have a lot of content organized into boxes and responsively changed using CSS flexbox.

Today I discovered that what I was doing with flexbox was wrong, and why my items looked like this when the width of the page was too small:


Notice how the boxes don’t change width to fill the rest of the space? I couldn’t figure out why until I read this article on Smashing Magazine, where they mentioned flex units.

Flex units automatically adjust the width of the flexbox to fit the available space. I can govern it with min-width or width to control when the boxes wrap around.

I was just setting a width or a variable width with a minimum and a maximum width on my elements, which was causing the above problem.

With flex: 1; and width: 50% I have this much nicer layout at this screen width:

2015-09-26_20-35-31Same thing for the homepage on the site. These columns needed to wrap around on smaller screen widths, and my old solution caused it to look like this:


With flex: 1; and min-width: 300px; I get this:


See how the columns fill the space appropriately? Very nice.

I love flexbox.

Hi! I'm Luke Harris.

I make websites for people.

I'm based in Corpus Christi, Texas, and I have over 10 years of experience making it easy for small business owners, non-profits, and religious organizations to reach more people online.