我最近开始使用flexbox，经常遇到需要在元素之间分配主轴上的空间的情况。
我经常在width和flex-grow之间犹豫不决。例如，如果我想要一个项目测量2个度量单位，另一个项目测量1个度量单位，总共为100％，我有两种选择。我可以设置width: 66.6%和width: 33.3%，或者flex-grow: 2和flex-grow: 1。
有时，如果我想让一个元素扩展其余的空间，我可以使用width: 100% 或 flex-grow: 1。
如何选择？在使用宽度和flex-grow时需要考虑哪些差异/注意事项？
width 和 flex-grow 是两个完全不同的 CSS 属性。
width 属性用于定义元素的宽度。
flex-grow 属性用于在 flex 容器中分配剩余空间。这个属性不像 width 属性一样会给元素应用一个特定的长度。它只是允许flex项目占用可能存在的任何空间。
有时，如果我想让一个元素占用其余的空间，我可以使用
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 属性设置了 flex 项的初始主轴大小，类似于 width。
关于 flex-basis 和 flex-grow 的区别，详见：