Flexbox Fridays logo

Welcome to week 3 of Flexbox Fridays!

This week's demo, Deal Picker, was inspired by the popular tab design that we all seem to love these days. We set out to build these tabs, as well as correlating product descriptions, all with flexbox. Let's see how this works.

We're using a few neat things from flexbox this week. The first is the usage of align-items: flex-end on .ProductPicker-nav. This allows each tab (.NavItem) to sit along the bottom of the cross axis. If you've built tabs with inline-block, floats, or positioning, you know how finicky everything can be when you need an off-sized tab. In our demo, .NavItem--is-active adds a bit of extra padding to a tab without the need to adjust its siblings.

Lastly, just like last week's demo we're using flex-direction: column coupled with justify-content: space-between within .Product (and the link it contains). This allows us to evenly distribute vertical space between elements within products. For our design, we want each product to be roughly 15em tall and have flexbox figure out some reasonable spacing. We use this a lot in our prototyping at Lincoln Loop; it's a nice helper for stubbing out media objects or cards, though it shouldn't be your final solution.

As always, please reach out in the comments with thoughts, corrections, or tips.

Happy (flexible) Friday!


2,341 0 9