Default Behavior (flex: 0 1 auto)
Short
Medium content
Much longer content that takes up more space
Controlling Item Widths - Finish
Master flex-grow, flex-shrink, and
flex-basis to control how flex items behave when space changes. These properties are
essential for responsive layouts.
flex-grow: 1 (All items grow equally)
Short
Medium content
Much longer content that takes up more space
Different grow values
flex-grow: 1
flex-grow: 2
flex-grow: 3
flex-shrink demonstration
No Shrink (flex-shrink: 0)
Normal Shrink
High Shrink (flex-shrink: 3)
flex-basis examples
flex-basis: 100px
flex-basis: 200px
flex-basis: auto
Real-world example: Dashboard layout
Main Content (grows to fill space)
Aside
Key Takeaways
- The Flex Properties Control:
flex-grow- How much an item should growflex-shrink- How much an item should shrinkflex-basis- The initial size before growing/shrinking
- Common Patterns:
flex: 1- Equal distribution (flex: 1 1 0)flex: 0 0 auto- Fixed size, no growing/shrinkingflex: 0 1 auto- Default behavior
- Use
flex-growfor proportional layouts and responsive design flex-shrink: 0prevents items from getting smaller than their basis- Perfect for sidebars, navigation, and content areas that need to adapt