为什么 flex 子元素未获得剩余空间？
在给定的 flex 布局中，前两个 flex 子元素并未获得剩余空间。这是因为：
flex: 1 等于 flex: 1 1 0%。这意味着 flex 子元素首先使用其最小内容宽度。但是，最小内容宽度不是用来确定剩余空间的。如果明确设置了 flex-basis，则剩余空间为容器大小减去每个元素的 flex-basis 大小。
在这个示例中，每个元素的 flex-basis 为 0%。因此，剩余空间大小为容器宽度减去元素边框大小。由于每个元素的 flex-grow 为 1，因此每个元素分配的大小为 (420 – 3 x 2) / 3 = 138。由于第一个元素的首选最小宽度大于 138，因此它将占据大约 218.48。
这导致剩余空间重新计算，剩余两个元素分配的大小变为 (420 – 218.48 – 2 x 2) / 2 = 98.76。同样的原因，第二个元素将取其首选最小宽度 100。这使得最后一个元素分配的大小变为 420 – 218.48 – 102 – 1 x 2 = 97.52，加上边框为 99.52。
因此，最小内容宽度用于约束元素的最终大小，而不是用来确定剩余空间。删除子元素的边框可以使计算更直观。
以上就是为什么 Flex 子元素没有获得剩余空间？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2846949.html
