please help me wrap my head around flex-basis (particularly flex-basis:0)
Ok so i understand flex-basis sets an initial starting point width for a flex item. In the case of flex-basis:0 though (or really any flex basis smaller than the min-content width) , doesn't this effectively just give flex items an initial width equal to their min-content width? (since they can't literally shrink lower than this). With this said, let's say i have 3 flex items with different intrinsic min-content widths, and I set them all to flex-basis:0 and flex-grow:1. How does this result in them all taking up equal space? I get that the extra space was divided equally among them, but since they started at different widths (their min-content width), shouldn't they also end at different widths? please help me make sense of this.
1 Reply
flex-basis: 0 actually sets the initial main size to 0px. that way they grow in the same rate with flex-grow: 1.
if flex-grow is not set (or 0) it will fall back to the intrinsic size