Visit Pixel Rocket

Shorthand Properties - Finish

Master the flex shorthand and flex-flow to write cleaner, more maintainable CSS. These shortcuts combine multiple properties into single declarations.

See Start Course Complete!

Individual Properties vs flex Shorthand

Long Way (Individual)

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
Item

Shorthand

flex: 1;
Item

Both produce identical results, shorthand is cleaner

Common flex Shorthand Values

flex: 1

Item 1
Item 2
Item 3

Equal distribution (1 1 0%)

flex: none

Item 1
Item 2
Item 3

No grow/shrink (0 0 auto)

flex: auto

Short
Medium content
Much longer content here

Size based on content (1 1 auto)

These three values cover most flex layout scenarios

flex-flow Shorthand

Individual Properties

flex-direction: row;
flex-wrap: wrap;
Item 1
Item 2
Item 3
Item 4
Item 5

flex-flow Shorthand

flex-flow: row wrap;
Item 1
Item 2
Item 3
Item 4
Item 5

flex-flow combines direction and wrap in one property

Real-world Example: Card Layout

Card 1

Using flex: 1 for equal width cards

Card 2

Clean, maintainable code with shorthand properties

Card 3

Professional layouts made simple

Cards use flex: 1 for equal distribution and flex-flow for responsive wrapping

Quick Reference Guide

flex Shorthand

  • flex: 1 → Equal distribution
  • flex: none → Fixed size
  • flex: auto → Content-based
  • flex: 0 1 200px → Custom values

flex-flow Shorthand

  • flex-flow: row wrap
  • flex-flow: column nowrap
  • flex-flow: row-reverse wrap
  • flex-flow: column wrap-reverse

These shortcuts make your CSS more readable and maintainable

Key Takeaways

  • flex Shorthand: Combines grow, shrink, and basis in one property
  • Common Values:
    • flex: 1 - Equal distribution (most common)
    • flex: none - Fixed size, no growing/shrinking
    • flex: auto - Size based on content
    • flex: 0 1 200px - Custom grow, shrink, basis
  • flex-flow Shorthand: Combines direction and wrap
  • Benefits:
    • Cleaner, more readable CSS
    • Less code to maintain
    • Industry standard practice
    • Better performance (fewer properties)
  • Always prefer shorthand over individual properties when possible
  • These patterns work for 95% of flexbox layouts you'll encounter