CSS Flexbox… learning with Frogs and Zombies?
I’m a visual person so learning with a visual aid comes much faster. So here comes Flexbox Froggy to the rescue. Yes, as cheesy as it may sound, these little frogs cleared up a whole lot of confusion. While using different flexbox properties you are challenged to guide the little frogs to their lily pads; with justify-content, align-items, and a few other commands, you can master the two axis of flexbox.
The main axis is the horizontal axis, which is defined by flex-direction and has four possible values: Row, Row reverse, Column and Column reverse. Row and Row reverse which run along the horizontal axis in the inline direction. Column and column reverse will run from the top of your page to the bottom — in the block direction. The cross axis runs perpendicular to the main axis where you would use flex-direction row and row-reverse. Whaaa….Don’t worry if that sounds confusing Flexbox Froggy will clear up the confusion… or do you dare to take the challenge of fighting off the Zombies?
So now that you are feeling a little more adventurous about Flexbox journey try Flexbox Zombies. Where you can battle zombies with your cross bow and lasers. Takes a bit more skill in the zombie game but you really get the basics of how flexbox works.
One concept I didn’t understand was flex-grow which defines the ability for the flex item to grow as needed. Another great resource is CSS-Tricks a Complete Guide to Flexbox. They have great working definitions and detailed illustrations of all of the properties.
As a new Developer I feel I came at the right time. Flexbox has changed the landscape of CSS layout. Before flexbox it was a little more cumbersome to layout a scaleable site with grid layouts. Being new to flexbox I was applying it to everything and it just didn't seem to work for me. So play a little and learn flexbox and all of the properties will save you time and the hassle of getting grids to line up and scale the way you want.