我最近开始使用flexbox，经常出现需要在元素之间的主轴上分配空间的情况。
我经常在width和flex-grow之间犹豫不决。例如，如果我想要一个项目来衡量2个度量，而另一个度量，最多加上100％，我有两个选择。我可以设置width: 66.6%和width: 33.3%，或flex-grow: 2和flex-grow: 1。
有时，如果我想要一个元素来扩展剩下的空间，我可以width: 100%或flex-grow: 1。
我该如何选择？使用宽度与弹性增长有什么区别/考虑因素？
答案 0 :(得分：10)
width和flex-grow是两个完全不同的CSS属性。
width属性用于定义元素的宽度。
flex-grow属性用于在Flex容器中分配可用空间。此属性不会对元素应用特定长度，例如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之间的差异，请参阅：