Hi everyone!
I just watched Quincy Larson’s “Learn CSS Flexbox for Beginners” tutorial on freeCodeCamp News, and I have a question about the concept of flex-grow, flex-shrink, and flex-basis.
In the tutorial, the instructor Indra (CodeWithIndra) explains how items along the main axis can grow and shrink to fill available space. However, I’m confused about when to use flex-grow vs flex-basis to control how much space each flex item takes up in a container.
For example, if I have three items in a flex container and I want the middle one to take up twice the space, should I use flex-grow: 2 on that item, or should I set flex-basis to a specific percentage? What’s the practical difference between these two approaches?
The tutorial also covered aligning items along the cross axis and reordering elements without changing the HTML, which was very helpful. But I’d love to understand the grow/shrink/basis properties more deeply.
Thanks in advance for any help!