I have been playing with and using CSS for many years, starting out with CSS2. When CSS3 was introduced, I began to look into the many new features and have used many of them. Two of the properties that I did not pursue until recently were CSS Animations and Flexbox.
Recently, I had no choice but to grasp the Flexbox principles, as I came across a project where Flexbox was incorporated in the CSS. This forced me to investigate Flexbox and learn on the spot. I found that with all the information available on the web today, learning the basics was no problem, and began using it in my own workflow. In other words, you learn by the repetition concept, do it over and over.
If you want to learn about Flexbox, here are a few resources that I can recommend you check out.
Each tutorial has its own style and techniques:
Flexbox Froggy Learn Flexbox basics by playing a game. Help Froggy and friends by writing CSS code! Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:
This game is designed for all levels, from the novice to experienced developer. The game levels become increasingly difficult.
Flexbox.io (Wes Bos) A simple, free 20 video course that will help you master CSS Flexbox. The first 13 videos are aimed at understanding the fundamentals of Flexbox – we will take a deep dive into understanding rows, columns, axes, wrapping, alignment, centering and layout. The last 7 are code alongs where we will build everything from a navigation to a mobile app layout entirely with Flexbox!
A Complete Guide To Flexbox Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the differnet possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.
Learn Flexbox Through Examples
Flexbox is easily one of the most important additions to CSS in the last decade. The only problem is that there’s a bit of a learning curve. Trust me, though: you want to learn this. And once you have, you’ll be singing its praises to anyone who will listen. I guarantee it.
Flrexbox – Learn Web Development|MDN
Objective: To learn how to use the Flexbox layout system to create web layouts.
A new technology, but with support now fairly widespread across browsers, Flexbox is starting to become ready for widespread use. Flexbox provides tools to allow rapid creation of complex, flexible layouts, and features that historically proved difficult with CSS. This article explains all the fundamentals.
Flexbox Is As Easy As Pie: Designing CSS Layouts
Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of the first CSS modules designed for actual layout (floats were really meant mostly for things such as wrapping text around images), it makes a lot of tasks much easier, or even possible at all.
THE ULTIMATE CSS3 FLEXBOX TUTORIAL FOR 2017 [INCLUDING VIDEO TUTORIALS + CHEAT SHEET]
With the new CSS3 Flexbox box model, you can now write more concise and maintainable code for various common layout tasks — such as vertical centering, taking up remaining space, or simpler grids. After this tutorial, you’ll be able to use Flexbox and understand exactly how it works.
Hopefully, these resources can get you started and you could end up as a Flexbox expert yourself.
If you know of other resources that you can recommend, please let us know.