Understanding flex-basis and flex-grow
Ok, so to summarise -
flex-basis: sets the initial width of flex items.
flex-grow: allows the flex items to take up equal space within the container
if you set the flex-basis value to 200px - when you scale the viewport down, the flex items will stay the same equal width until the flex items width drops below 200px. Then assuming you have flex-wrap on, the flex items will begin to drop to a new line. And because you have flex-grow on, the item that drops to a new line will take up the full width of the container. So essentially, flex-basis says "set me to 200px. As soon as my width is below 200px, I will break to a new line"
by default, the initial value of flex-basis is 0px - meaning it can squish all the way down to 0px and won't break to a new line. This is why its important to set a breakpoint?
However, if you don't declare a flex-basis, the flex-item will span as wide as its content? So, assuming you set the flex-grow to all items to 1 - this to me initially sounds like each item will be given equal width. Yet, if the content varies, this will change how much spacing the element actually takes up.
Is this right?