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
yeah stretching is controlled by flex grow, you can alternatively also use
space-evenly
if that fits your use case