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:
With flex: 1; and min-width: 300px; I get this:
See how the columns fill the space appropriately? Very nice.
I love flexbox.