CSS module for flexible layouts providing a broad range of options for aligning elements while eliminating the need for floats and tables.
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
- Advanced cross-browser flexbox
- Are we ready to use flexbox?
- CSS Flexbox Is Entirely Logical (Almost)
- Designing A Product Page Layout with Flexbox
- 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)
