tips

Tip 008 - Flex Basis

Flexbox has a lot of wonderful things about it, but probably my favorite is the way it encourages you to suggest layouts to the browser instead of micromanaging it. flex-basis is a property you can set on a flex item, and it says, "Here's the width I'd like you to start at. If it's too small or it doesn't fit, you do whatever you do to make it work, but here's the ideal."

You combine this property with others like flex-grow and flex-shrink to tell the element how to behave when it has too much or not enough room, compared to the others. You can get some neat effects, including this sidebar layout that laughs in the face of media queries and just magically works.

 

Have you written a reply to this post? Send me the URL here: