我最近开始使用 flexbox，经常会出现需要在元素之间的主轴上分配空间的情况。
我经常在width 和flex-grow 之间犹豫。例如，如果我想要一个项目测量 2 个测量值，而另一个测量 1 个测量值，加起来为 100%，我有两个选择。我可以设置width: 66.6% 和width: 33.3%，或者flex-grow: 2 和flex-grow: 1。
有时，如果我想让一个元素扩大其余空间，我可以使用width: 100% 或flex-grow: 1。
我该如何选择？使用 width 与 flex-grow 有什么区别/注意事项？
【问题讨论】：
width 和 flex-grow 是两个完全不同的 CSS 属性。
width 属性用于定义元素的宽度。
flex-grow 属性用于在弹性容器中分配可用空间。此属性不会将特定长度应用于元素，例如 width 属性。它只是允许弹性项目占用任何可用空间。
有时，如果我想让一个元素扩大其余空间，我可以使用
width: 100%或flex-grow: 1。我该如何选择？
是的，如果行中有一个元素，width: 100% 和 flex-grow: 1 可能具有相同的效果（取决于 padding、border 和 box-sizing 设置）。
但是如果有两个元素，而您希望第二个元素占据剩余空间呢？如果容器中有同级，width: 100% 会导致溢出。我想你可以这样做：
width: calc(100% - width of sibling);
但是如果兄弟的宽度是动态的或未知的呢？ calc 不再是一个选项。
快速简便的解决方案是flex-grow: 1。
width 和 flex-grow 是苹果对橙子，width 和 flex-basis 是苹果对苹果。
flex-basis 属性设置弹性项目的初始主尺寸，类似于width。
flex-basis 和 flex-grow 之间的区别参见：
【讨论】：