Previous: SaaS Features Section Next: Align Self See Finish

Controlling Item Widths - Starting Point

Learn flex-grow, flex-shrink, and flex-basis to control how items behave.

Default Behavior (flex: 0 1 auto)

Short
Medium content
Very long content that takes up more space

Items size based on content, don't grow, can shrink

Flex Grow - Fill Available Space

Item 1
Growing Item
Item 3

Middle item should grow to fill space

Flex Shrink - Control Shrinking

This item shouldn't shrink
This item can shrink
This item can shrink

First item should maintain its width

Flex Basis - Starting Size

200px basis
200px basis
200px basis

All items should start at 200px width

Common Pattern: Equal Width Items

Item 1
Item 2
Item 3

All items should be equal width

Instructions

Apply flex properties to see how items grow, shrink, and size themselves!

Key Properties:

  • flex-grow: 1; - Item can grow
  • flex-shrink: 0; - Item won't shrink
  • flex-basis: 200px; - Starting width
  • flex: 1; - Shorthand for 1 1 0%