为什么 Flex 子元素没有获得剩余空间？

一分耕耘，一分收获！既然打开了这篇文章《为什么 Flex 子元素没有获得剩余空间？》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

为什么 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 子元素没有获得剩余空间？》文章吧，也可关注golang学习网公众号了解相关技术文章。