View on 🖥️ 💻 to use the visual flexulator!
remaining space
allocated space
final width
remaining space
shrink factor
shrink amount
final width
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.
The worked example uses the first flex item. Container width, total basis, and remaining space include every item. Grow share, shrink factor, and final width are that one item's — open an Item Card to see a sibling.
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.
The worked example uses the first flex item. Container width, total basis, and remaining space include every item. Grow share, shrink factor, and final width are that one item's — open an Item Card to see a sibling.
1
2
3
4