Flexbox

Flexbox is a different way to manage multiple related elements. A grid is designed as a two-dimensional layout, whereas a flexbox layout is one-dimensional, placing items one after another in a row or column.

Flexbox’s advantages over grids

Flexbox is likely to be more useful to us than a grid layout for the following reasons:

• A flexbox container has better controls for dynamically managing the size of elements.
• Although a flexbox container is conceptually a single row, it can automatically wrap its contents on the screen when the content gets too wide.
• Flexbox containers can be nested, meaning we can start with a flexbox row, but elements inside that row could themselves be flexbox columns, which in turn could contain flexbox rows. Nested flexboxes give us a lot of options for controlling the layout.

Grids are still useful for managing content that’s tabular in nature, which is true of some data displays, but not true of every kind of layout.

Common page structure

Think about a common page structure, where we have a full-width header, left and right sidebar with main content in the middle below the header, and below all of that, a full-width footer.

This layout is similar to a grid—the header is the first row of the grid that has one element with a column span of three. The second row has three elements for the sidebars and the main content, width-adjusted, and the third row has another element with a column span of three. Below is an example: