James Barrett13,253 Points
Really struggling to understand what flex-basis is actually doing
After watching Guil's video about 4 times, I just can't seem to grasp the flex-basis concept. All I understand is that it has to work in conjunction with flex-grow (not really sure why. To me, flex-basis just seems useless if you aren't using flex-wrap.) and it kind of works like a media query: If an item is less than 200px... then do something (what is it doing?).
Please tell me if I am interpreting this completely wrong. I just can't seem to get my head around it!
Kevin Korte28,084 Points
Flex-basis allows you to set a flex child's default size. This is kinda cool, because let's say you know a profile pic has a fixed size, you can set the flex-basis to that size, whether it be a fixed size like pixels or a percentage, and than using flex grow, allow every other flex child to take up the remaining space. By default, flex-basis looks at the content inside, and distributes remaining space based on the flex-grow property of the element.
This is my favorite flexbox guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
From my understanding, in simple terms...
- flex-grow makes the element larger than the other elements by a certain amount of times
- flex-shrink is the opposite of flex-grow and makes element smaller than the other elements by a certain amount of times
- flex-basis specifies the initial length of a flexible item