flex-grow和width有什么区别？

我最近开始使用flexbox，经常会遇到需要在主轴之间分配空间的情况。

我经常在width和之间犹豫flex-grow。例如，如果我要一项测量2个量度，而另一项测量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属性用于在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。