Flex Resource 1: CSS-Tricks
CSS-Tricks' A Complete Guide to Flexbox is a comprehensive guide on how to use the flexbox layout. It separates descriptions/explanations of flexbox properties based on whether they are applied to the parent (flex container) or children (flex items) by displaying them in 2 differently colored columns. The code snippets combined with visual displays of how flex properties affect flex items are very helpful, as they give you an idea of how the layout of items on your own page may look before they are actually applied, and allow you to build a design with flexbox properties in mind.
Below the list of flex properties are additional resources, including sections on Prefixing Flexbox (applying browser-specific prefixing to allow for display on other browsers and devices), editable code to let you configure flex layouts to get an understanding of how different properties work, links to other pages and articles about specific flex properties, a link to a page on GitHub called Flexbugs with a list of known flex errors, and other links to additional information. There is also a link at the top of the page to a downloadable, high quality poster version of the flexbox parent and children properties.
Flex Resource 2: Josh W Comeau
Josh Comeau's An Interactive Guide to Flexbox is a tutorial on how to use flexbox properties, values, and layouts that contains visual interactive demos and examples for each property discussed. It covers all of the same basic information as CSS-Tricks, but expands further upon each concept with detailed descriptions that aren't too technical or confusing. The interactive examples are set up in a way that details precisely how and why some properties work the way they do, and why other properties might not work the way you'd expect. I really appreciate his explanations of the difference between align-items
and justify-content
, and why they don't work exactly the same way. His demo for how flex-grow
works for multiple flex children is also very helpful, as it visually shows the way setting higher flex-grow changes the proportional share of unused space. He also shares tricks on how to accomplish styling techniques in flexbox in unique ways that may seem like they aren't possible using flex properties alone.
Flex Resource 3: Malven Co.
Malven Co.'s FLEX: A simple visual cheatsheet for flexbox is, as the name suggests, a cheat sheet listing the most relevant and frequently-used flex properties, alongside simple illustrations of flex children behavior when the properties are applied. Clicking on a property copies the required code to your clipboard so you can easily paste it into a project you are working on. It may not be as detailed as Josh Comeau or as comprehensive as CSS-Tricks, but it is still a handy resource if you ever need a quick refresher on what different properties are and how they work.
Flex Resource 4 (just for fun): Flex Games
There are a number of simple flex-based games available to play that reinforce knowledge of flex properties. Most of them have varying levels of difficulty and may or may not describe what flex properties are required to beat the specific level. The most popular ones I've found are Flexbox Froggy and Flex Box Adventure, both of which require the player to use flex properties to move the character(s) to their targets. They are a helpful resource for beginners, as they quickly and simply describe the basics of flex properties, and they are still useful for people with flexbox knowledge to practice and reinforce what they already know.
Summary
The pages above are only some of the many resources available breaking down the concept of flexbox and describing how to use it your advantage when designing and laying out web pages. CSS-Tricks has been a go-to when I don't remember how to accomplish a desired layout, but I expect I'll be revisiting Josh Comeau's page quite frequently as well, as I really appreciate how many interactive demos it contains and how he explains concepts in a way I hadn't thought about before. The games are also a fun way to practice using flexbox, and I will also keep the CSS-Tricks poster and Malven Co.'s cheat sheet on hand whenever I need to quickly reference a specific property.