Welcome to week 6 of Flexbox Fridays!

This week we wanted to briefly touch on an often overlooked feature of flexbox, inline-flex. This value instructs the elements within a container to behave as inline elements.

In our storybook example of "The Crow Or The Bee" we set out to include a correlating illustration for select words throughout the story. Flexbox gives us a much better system for alignment and layout should we choose to expand upon our pattern.

Traditional methods, like vertical-align, display: inline-block feel a bit hacky in comparison. While we're using this method to tie cute icons of animals to their labels, you might use this to create rich inline social media buttons, something like a shield, or some other interactive mini-widget (ideas we hope to explore).

We will be exploring inline-flex in depth more in weeks to follow, but thought this inline, flexible story would be a fun, straight forward place to start.

If you've seen any especially neat uses of inline-flex in "the wild" please feel free to include them in the comments so we can all check them out.

Happy (flexible) Friday!


2,027 0 9