Introduction to Flexbox

Flexbox is a powerful CSS layout system for arranging items in one dimension.

What is Flexbox?

Flexbox makes it easy to:

• Align items horizontally or vertically
• Distribute space between items
• Reorder items without changing HTML
• Create responsive layouts

Creating a Flex Container

Add display: flex to create a flex container:

Without flexbox, the boxes would stack vertically!

Interactive Flexbox Playground

Try changing the flex properties:

Flex vs Block

Compare the difference:

Flex Container Properties

The main properties on the container:

Flex Item Properties

Properties on flex children:

Common Flex Patterns

Centering Content

Exercise: Create a Flex Row

Convert block items to a horizontal flex row: