Web Analytics
☕ Coffee 𝕏 Follow
0%

Flexbox Advanced

Intermediate ~11 min read

Flex Grow

flex-grow controls how much a flex item grows relative to others. Default is 0 (no growth). Higher values = more growth.

HTML
CSS
JS

Flex Shrink

flex-shrink controls how much a flex item shrinks when space is limited. Default is 1. Set to 0 to prevent shrinking.

HTML
CSS
JS

Flex Basis

flex-basis sets the initial size of a flex item before growing or shrinking. Think of it as the starting width/height.

HTML
CSS
JS

Flex Shorthand

The flex property combines grow, shrink, and basis: flex: grow shrink basis. Common values: flex: 1 (grow equally), flex: none (don't grow/shrink).

HTML
CSS
JS

Flex Wrap

flex-wrap controls whether items wrap to new lines. Values: nowrap (default), wrap, wrap-reverse.

HTML
CSS
JS

Align Self

align-self overrides align-items for individual flex items. Perfect for making one item behave differently!

HTML
CSS
JS

Order

The order property changes the visual order of flex items without changing HTML. Default is 0. Lower values appear first.

HTML
CSS
JS
Common Pattern: Use flex: 1 on items to make them grow equally and fill available space. Perfect for equal-width columns!

Summary

  • flex-grow - How much item grows (default: 0)
  • flex-shrink - How much item shrinks (default: 1)
  • flex-basis - Initial size before grow/shrink
  • flex - Shorthand: grow shrink basis
  • flex-wrap - Allow items to wrap (nowrap, wrap)
  • align-self - Override align-items for one item
  • order - Change visual order (default: 0)

Quick Quiz

Which property makes flex items wrap to new lines?

A
flex-grow
B
flex-wrap
C
flex-direction
D
align-items
Previous Flexbox Basics
Next Grid Basics