Flex Item Properties

Control how individual flex items grow, shrink, and size themselves.

flex-grow

Determines how items grow to fill extra space:

Different Grow Values

The middle box gets twice as much extra space!

flex-shrink

Controls how items shrink when space is limited:

flex-basis

Sets the initial size before growing/shrinking:

The flex Shorthand

flex: grow shrink basis combines all three:

Common flex Values

Interactive Playground

Practical: Equal Columns

Practical: Sidebar Layout

order Property

Change visual order without changing HTML:

Exercise: Make Item Grow

Make the middle item grow to fill available space: