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:

2015-09-26_20-34-50

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:

2015-09-26_20-26-29

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

2015-09-26_20-28-01

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

I love flexbox.