Conclusion

You’ve learned how to use the Flex-container and Flex-item alignment properties. I walked you through understanding absolute and relative flex items, auto-margin alignments and the weird results upon switching flex direction.

You even had a chance to apply your flex skills to building Catty Music and then I touched up on responsive design.

It’s been a long ride indeed. Now, I’ll explain some final concepts to you, help you with resources and links I think you’ll find very helpful too.

How’s the browser support for flexbox?

This is a common question asked when looking to use the flexbox model in production. I can’t answer the question perfectly, but the caniuse website does justice to this.

Here’s a screenshot from caniuse, and browser support is quite impressive. You may see for yourself here.

Early in my career, I glanced over caniuse many times and still could not grasp what the data represented meant.

So here’s a brief explanation.

At the right bottom of the caniuse website is a legend. Take a look at the image above, or just visit the site, find the legend and you’d be good to go.

That’s actually all there is to it.

Resources

1. The Repo for this Course:
   In the “build a music app layout” folder lies the solution to the Catty Music exercises.

2. Flexbox Froggy: A Cool Flexbox Game

I am writing what I think may be one of the most important books on the subject of modern layouts in CSS.

It’s centered around using the Flexbox and Grid models. Take a look! I’m pretty sure you’ll love it :-)