joey //
KPCKevin Powell - Community
•Created by joey // on 6/23/2024 in #front-end
why is my html/css layout behaving this way?
to preface, i've already figured out the fix to this. I'm still curious though as to why the elements are laid out this way. why did 3 of the empty divs get their own row, meanwhile the other 3 are hidden behind the row of images. Also, what did the empty divs even base their 100% height off of ? thanks.
https://codepen.io/Joseph-Huff-the-scripter/pen/bGyMvJr
22 replies
KPCKevin Powell - Community
•Created by joey // on 6/10/2024 in #front-end
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.
2 replies