Previous: Gaps Next: Dice Build See Finish

Shorthand Properties - Starting Point

Master the flex shorthand property that combines flex-grow, flex-shrink, and flex-basis into one powerful declaration!

flex-grow, flex-shrink, flex-basis (Individual)

The long way: setting each property separately

Item 1
flex-grow: 1
Item 2
flex-grow: 2
Item 3
flex-grow: 1

flex: 1 (Shorthand)

Same as: flex-grow: 1, flex-shrink: 1, flex-basis: 0%

Item 1
flex: 1
Item 2
flex: 1
Item 3
flex: 1

flex: 1 2 3 (Different Values)

flex: [grow] [shrink] [basis]

Item 1
flex: 1
Item 2
flex: 2
Item 3
flex: 3

flex: none (No Flexibility)

Same as: flex-grow: 0, flex-shrink: 0, flex-basis: auto

Flexible
flex: 1
Fixed Size
flex: none
Flexible
flex: 1

flex: auto (Flexible with Content Size)

Same as: flex-grow: 1, flex-shrink: 1, flex-basis: auto

Short
flex: auto
Medium Content
flex: auto
Much Longer Content Here
flex: auto

Mixed Flex Values

Combining different flex values for complex layouts

Sidebar
flex: none
Main Content
flex: auto
200px
flex: 0 0 200px

🎯 Common Flex Patterns

Equal Width Columns

Column 1
Column 2
Column 3

flex: 1

Sidebar Layout

Sidebar
Main Content

Sidebar: flex: none | Main: flex: 1

Three Column with Fixed Center

Flexible
300px Fixed
Flexible

Sides: flex: 1 | Center: flex: 0 0 300px

📚 Flex Values Reference

flex: 1

Equal flexible items

1 1 0%

flex: auto

Flexible with content size

1 1 auto

flex: none

No flexibility

0 0 auto

flex: 0 0 200px

Fixed 200px width

Fixed size

Instructions

Add display: flex to containers, then try different flex shorthand values on the items!

Key Points:

  • flex is shorthand for flex-grow flex-shrink flex-basis
  • flex: 1 is the most common - equal flexible items
  • flex: none creates fixed-size items
  • flex: auto sizes based on content then distributes extra space
  • You can mix different flex values in the same container