Closed. This question needs to be more focused。它当前不接受答案。
想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
5年前关闭。
我正在研究CSS3灵活模型。我检查了MDN's page，我想我已经有了基本概念，但是我不明白以下属性是如何工作的：
flex-basis：CSS flex-basis属性指定flex基础，即flex项目的初始主要尺寸。
flex-grow：CSS flex-grow属性指定弹性项目的弹性增长因子。
flex-shrink：CSS flex-shrink属性指定弹性项目的弹性收缩系数。
我还尝试修改MDN上链接的沙箱http://demo.agektmr.com/flexbox/和http://the-echoplex.net/flexyboxes/，但仍然不知所措。
您能否详细说明这些属性以帮助理解它们的含义？
想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
5年前关闭。
我正在研究CSS3灵活模型。我检查了MDN's page，我想我已经有了基本概念，但是我不明白以下属性是如何工作的：
flex-basis：CSS flex-basis属性指定flex基础，即flex项目的初始主要尺寸。
flex-grow：CSS flex-grow属性指定弹性项目的弹性增长因子。
flex-shrink：CSS flex-shrink属性指定弹性项目的弹性收缩系数。
我还尝试修改MDN上链接的沙箱http://demo.agektmr.com/flexbox/和http://the-echoplex.net/flexyboxes/，但仍然不知所措。
您能否详细说明这些属性以帮助理解它们的含义？
最佳答案
正如@cimmanon在评论中所建议的那样，w3规范对其进行了更好的解释：http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex：
简而言之：
flex-basis指定弹性项目的初始主要尺寸，然后根据弹性因子分配自由空间。
flex-grow控制正的可用空间的分布（当容器的大小大于显示flex项目所需的大小时）
flex-shrink控制负空间的分布（当容器尺寸小于显示项目所需的尺寸时）