When the combined size of all the flex items is less than their container, the remaining space is distributed amongst all the items. The flex-grow attribute is used to determine how the remaining space should be allocated.
1
2
3
If the space remaining is a negative this means that the flex container is smaller than the preferred width of all the flex items. They are going to have to shrink. By assigning a flex-shrink value we can control much space each flex item will surrender.
1
2
3
4
Inspired By
- Understanding Flexbox by Mike Riethmuller
- Flexbox Adventures by Chris Wright
- Designing the Flexbox Inspector
Rachel Andrew Explains Flexbox
- Part 1 , 2 , 3 , 4
Learn
- Flexbox Defense
- Flexbox Froggie
- Learn Flexbox Layout
- Flexbox in 5 Minutes
- Wes Bos: What The Flexbox Course
Deeper Reads
- What are the differences between flex-basis and width?
- What exactly flex-basis property sets?
- The Difference Between Width and Flex Basis
Tools
- Made By Mike Flexbox Tester
- Flexbox Playground and Code Generator
- Flexbox Generator
- Flexbox Playground
Guides
- CSS-Tricks Flexbox Guide
- Codrops Guide
- Mozilla Guide
- Scrimba Course
- The Complete CSS Flexbox Tutorial
Specs
- W3C Display Module
- Box Alignment
- Flexbox Layout Algorithm