5R - CSS Flex

CSS-TRICKS

CSS-Tricks

The comprehensive guide provided by css-tricks explains flexbox, its associated properties, and provides pictures of formatted elements - as well as code.

MDN

Mozilla Developer Network

MDN provides a detailed description of flex layouts, and provides an in-browser css editor to test the impact of certain properties real time.

Josh W Comeau's Site

Interacitve Guide to Flexbox

This site provides an informative and humorous look at flexbox layouts, with real-time editable examples of many popular options for flex. It also features disgraced former Microsoft mascot Clippy.

Summary

There are a number of solid resources to learn how flex layouts work, many of them interactive, that work from the basics to more techinical concepts.