Flex布局中剩余空间优先分配给第三个子元素的原因
问题：给定了一段Flex布局代码，其中前两个子元素的flex-basis均为0%。那么，剩余空间应该优先分配给第一个子元素（文本宽度）和第二个子元素（图片宽度），但实际结果却表明剩余空间全部分配给了第三个子元素。为什么会这样？
答案：
Flex布局中，剩余空间的大小取决于flex容器的宽度和每个子元素的flex-basis。如果flex-basis明确设置了（在本例中为0%），剩余空间将是容器大小减去每个子元素的flex-basis大小。
在本例中，由于子元素的flex-basis均为0%，剩余空间将是容器宽度减去子元素的边框大小。由于每个子元素的flex-grow都是1，剩余空间将平均分配给三个子元素。
但是，第一个子元素的文本宽度比分配给它的剩余空间大。因此，第一个子元素将占据其首选最小宽度，导致剩余空间重新计算。因此，第二个子元素的分配空间将是其首选最小宽度（图片宽度）。
最终，第三个子元素将分配剩余的剩余空间，加上其边框大小。
因此，剩余空间并不是用来确定剩余空间的，而是用来约束最终元素大小的。如果想要更直观地计算剩余空间，可以删除子元素的边框。
