CSS: The Definitive Guide, 5th Edition

Chapter 11. Flexible Box Layout

The CSS Flexible Box Module Level 1, or flexbox for short, makes the once difficult tasks of laying out certain kinds of pages, widgets, applications, and galleries almost simple. With flexbox, you often don’t need a CSS framework. In this chapter, you’ll learn how to use just a few lines of CSS to create almost any feature your site requires.

Flexbox Fundamentals

Flexbox is a simple and powerful way to lay out page components by dictating how space is distributed, content is aligned, and elements are visually ordered. Content can easily be arranged vertically or horizontally, and can be laid out along a single axis or wrapped across multiple lines. And much, much more.

With flexbox, the appearance of content can be independent of source order. Though visually altered, flex properties should not impact the order of content read by screen readers.

Warning

Specifications say that screen readers should follow source order, but as of late 2022, Firefox follows the visual order. As of this writing, a proposal calls for adding a CSS property that specifies whether to follow source or visual order, so it may soon be possible to decide for yourself.

Perhaps most importantly, with flexible box module layouts, elements can be made to behave predictably for different screen sizes and different display devices. Flexbox works very well with responsive sites, as content can increase and decrease in size when the space provided is increased or decreased.

Flexbox ...