html - 软盒型号说明

Question

我正在研究 CSS3 灵活模型。我查看了MDN 的有关它的页面，我想我了解了一般概念，但我不明白以下属性是如何工作的：

flex-basis : CSS flex-basis 属性指定了弹性基础，它是弹性项目的初始主要尺寸。

flex-grow : CSS flex-grow 属性指定一个弹性项目的弹性增长因子。

flex-shrink：CSS flex-shrink 属性指定了弹性项目的弹性收缩系数。

我还尝试修改 MDN 上链接的沙箱http://demo.agektmr.com/flexbox/和http://the-echoplex.net/flexyboxes/，但我仍然没有受到启发。

您能否详细说明这些属性以帮助理解它们的含义？

Answer 1

正如@cimmanon 在评论中所建议的那样，w3 规范解释得更好：http ://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex ：

简而言之：

flex-basis指定弹性项目的初始主要大小，在根据弹性因子分配可用空间之前。

flex-grow控制正可用空间的分配（当容器的大小大于显示弹性项目所需的大小时）

flex-shrink控制负空间的分布（当容器尺寸小于显示项目所需的尺寸时）