Take all the sizes from the flex items and add them up. If this total flex basis is less than the parent container, the remaining space will be distributed amongst the items.
The flex-grow attribute is used to determine how the remaining space should be allocated. Think of flex-grow as a mulitplier which will increase the amount of space it will get in the final calculation.
1
2
3
Take all the sizes from the flex items and add them up. If this total flex basis is greater than the parent container, each flex-item will have to reduce it's size to fit.
The flex-shrink attribute determines how much space is given up by the flex-item. Unlike flex-grow, the flex-shrink value controls how much space is given up. Increasing the flex-shrink will reduce the size of the flex-item relative to its siblings.
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