flex-grow 和 width 有啥区别？

Posted 2023-03-06

【中文标题】flex-grow 和 width 有啥区别？

【英文标题】：What are the differences between flex-grow and width?flex-grow 和 width 有什么区别？

【发布时间】：2016-04-16 11:52:58

【问题描述】：

我最近开始使用 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 有什么区别/注意事项？

【参考方案1】：

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。

What are the differences between flex-basis and width?

flex-basis 和 flex-grow 之间的区别参见：

flex-grow not sizing flex items as expected