Chapter 11

Specialty Page Layouts with Flexbox

As you might guess from the name, CSS flexbox is a flexible box model for laying out content on the Web. Flexbox, which is a relatively new addition to CSS, makes it possible to style sections of a website to allow child elements to fully fill a container, while also still being able to adapt to the content—a combination that was often difficult to do in the pre-flexbox era.

For example, suppose we had three columns with different amounts of content inside, and we wanted the columns all to be the same height as the longest one. A diagram of this scenario for three columns without flexbox appears in Figure 11.1.

Figure 11.1: Columns with different lengths of content, and hence different heights. ...

Get Learn Enough HTML, CSS and Layout to be Dangerous: An Introduction to Modern Website Creation and Templating Systems now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.