Flexbox Fridays logo

Welcome to week 2 of Flexbox Fridays!

For our week 2 demo we set out to build flexible color chips, of sorts, for a style guide. The layout is responsive, transitioning from rows to columns, and each color chip grows on hover, fading in the details of that particular color.

First, we change flex-direction on .color-list via a media query to toggle how colors are oriented. On small displays we want them to line up, stacked, in a column so we use column. On larger displays with more horizontal spacing we switch to row. It's important to note that flexbox, our animations, and everything around this requires minimal modification as a result of the change, as you'll see when we talk about flex-basis.

Next up, this demo taught us that flex-basis can be animated via transitions. Check this out:

    transition: flex-basis 500ms ease-in-out;

.color:hover {
  flex-basis: 20em;

This worked (and in hindsight of course it would) and it allowed us to have a nice growing effect for each chip in our palette.

Lastly, we're also using flex-direction: column in the same way we do for the general layout to get sensible spacing between elements within each color.

Flexbox Fridays is a way to experiment with this new cleaner, easier way of building layouts and sharing what we learn in the process. If you have discovered a more efficient way of doing any of these crafty things with flexbox please let us know in the comments and we'll discuss it!

We also want Flexbox Fridays to be more than just us building a demo each week. Ideally this turns into a community project, with as many people as possible setting aside time each week to talk about making smarter, flexible layouts the right way; dedicated time to eventually bring an end to a page full of floats. Share your FF demos in the comments to our posts or examples, reach out to us on Twitter, use #flexboxfridays. Basically, let's all experiment with flexbox and share all the things...particularly on Fridays.

Happy (flexible) Friday!

1,958 0 4