Modern CSS with Tailwind, 2nd Edition

Flexbox

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

I realize that sounds less useful than a full grid.

But flexbox is likely to be more useful to you than a grid layout for three 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 be made to automatically wrap its contents on the screen when the contents get too wide.

• Flexbox containers can be nested, meaning you can start with a flexbox row, but elements inside that row could themselves be flexbox columns, which in turn could ...