%ign%ignore_a_1%re_a_1% 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。
话袋AI笔记
话袋AI笔记, 像聊天一样随时随地记录每一个想法，打造属于你的个人知识库，成为你的外挂大脑
195 查看详情
这导致剩余空间重新计算，剩余两个元素分配的大小变为 (420 – 218.48 – 2 x 2) / 2 = 98.76。同样的原因，第二个元素将取其首选最小宽度 100。这使得最后一个元素分配的大小变为 420 – 218.48 – 102 – 1 x 2 = 97.52，加上边框为 99.52。
因此，最小内容宽度用于约束元素的最终大小，而不是用来确定剩余空间。删除子元素的边框可以使计算更直观。
以上就是为什么 Flex 子元素没有获得剩余空间？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1157086.html
微信扫一扫 
支付宝扫一扫 
