The main axis in flex box

flex-grow and flex-shrink and flex-basis all work on the main axis, meaning that if you have 2 flex items and the flex-direction: row; then the main axis is the horizontal one so the items are allowed to grow and shrink in that axis and if you set flex-basis of the flex items then it's equal to setting the width of them, but if your flex-direction: column; then the growing and shrinking are happening in the vertical axis and setting the flex-basis is equal to setting the height, and *maybe this why we don't have justify-content: stretch; because if you want the items to stretch across the main axis you can just set the flex-grow: 1; --- Is this take right or am I missing something?
1 Reply
StefanH
StefanH7d ago
yeah stretching is controlled by flex grow, you can alternatively also use space-evenly if that fits your use case

Did you find this page helpful?