Introduction to Flexbox

Get introduced to flexbox and learn flex properties like flex-direction, flex-wrap, and flex-flow

We'll cover the following...

Flexbox does a superb job of centering multiple items and is also great at spacing items of different sizes. It’s not, however, very good at lining up rows and columns or keeping items in a structured grid format.

Columns, as we saw earlier, excel at making text columns, but can be unruly and difficult when laying out things other than text.

Flexbox came before CSS grid and has better browser support (although CSS grid has excellent browser support, too). Flexbox shines

  • when doing single rows/columns
  • for multiple rows when fine-grained control isn’t required
  • with objects of varying size

If you need pixel-perfect control over where elements are, flexbox will make you tear your hair out, but if your layout needs are more approximate or you have varying-sized items, flexbox is an excellent weapon of choice.

Flex properties

display: ...