Skip to content

Don't forget to use flexbox flex units

| Luke Harris

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.

Have some thoughts on this post?

Reply with an email