In the flex layout model, the children of a flex container can be laid out in any direction, in any order (independent of source order), and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Flexbox Specification

• https://www.w3.org/TR/css-flexbox-1/ (Candidate Recommendation, 19 November 2018)
• https://drafts.csswg.org/css-flexbox/ (CSS Flexible Box Layout Module Level 1 Editor’s Draft, 21 January 2020)

Modern Flexbox Articles

• Using CSS flexible boxes (MDN)
• Flexbox — fast track to layout nirvana? (Dev.Opera)
• Dive into Flexbox (Bocoup)
• Working with flexbox: The new specification (Adobe)
• A Complete Guide to Flexbox (CSS-Tricks)
• Designing CSS Layouts With Flexbox Is As Easy As Pie (Smashing Magazine)

Articles

• 6 Reasons to Start Using Flexbox
• https://dev.opera.com/articles/advanced-cross-browser-flexbox/
• Are we ready to use flexbox?
• CSS Flexbox Is Entirely Logical (Almost)
• Designing A Product Page Layout with Flexbox
• https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
• Using flexbox: mixing old and new for the best browser support
• Using Modernizr with Flexbox

Browser Support Information

• Flexible Box Layout Module (Can I use)

Canonical Questions & Answers:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

• Why don't flex items shrink past content size?

• Can't scroll to top of flex item that is overflowing container

• What are the differences between flex-basis and width?

• Flexbox: center horizontally and vertically