Html 如何防止内容重新调整flex项的大小？

我正在使用CSS flexbox构建一个可伸缩、响应迅速的网格。当将Google图表应用于其中一个flexbox项目时，该项目的大小会发生轻微变化。这足以使网格失去对齐。我将以下图片放在一起以帮助说明这个问题

将Google图表应用于第6项之前的Flexbox网格：

将Google图表应用于第6项后的Flexbox网格：

Flexbox网格的加载速度比Google图表快，因此网格最初加载正确。然而，当图表加载时，第6项略微展开，导致上图2

中间列flex容器和item 6 div在css中设置如下：

#middlecolumn {
    width: 75%;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin: 0.25%;
}

#item6_div {
    flex: 3;
    margin-top: 0.8vh;
}

请注意，项目5和7在css中的设置方式相同，

flex

值为

1

。即项目6是项目5和7高度的3倍。因此，当项目6调整大小时，保持3:1的比例

---

css中是否有我遗漏的东西阻止Google图表调整其flexbox容器项的大小？

当您告诉flex项设置为

flex:3

（第6项）或

flex:1

（第5项和第7项）时，以下是速记属性的分解方式：

flex: ?  =  <flex-grow>, <flex-shrink>, <flex-basis>

flex: 3 =  flex-grow: 3, flex-shrink: 1, flex-basis: 0

flex: 1 =  flex-grow: 1, flex-shrink: 1, flex-basis: 0

flexbox规范中的更多详细信息：

---

但你可能还有另一个问题。你写道：

请注意，项目5和7在css中的设置方式相同，

flex

值为

1

。即项目6是项目5和7高度的3倍。因此，当项目6调整大小时，保持3:1的比例

这不是

flex grow

属性的工作方式

通过将

flex-grow:3

应用于flex-item，您告诉它消耗的可用空间是使用

flex-grow:1

的flex-item的三倍。这并不一定意味着第6项的尺寸是第5项和第7项的三倍

在这里了解更多关于flex grow的工作原理：

---

作为另一种调整大小的方法，您可能希望使用

flex basis

属性。在第6项上尝试

flex:0 0 60%

，在第5项和第7项上尝试

flex:0 0 20%

。

我确信这不是最好的解决方案，但它对我很有效：

例如，如果您有一行四个项目，它们应该均匀分布在整个屏幕上

为它们中的每一个添加CSS：

min-width: 20vw;

---

谢谢你的回答，Michael，你在这里和链接线程中的回答已经极大地改变了我对各种flex属性的理解。与链接线程一样，我在flex项目之间使用的边距对对齐造成了严重破坏，但我认为您的方法最终会让我达到目的。

min-width: 20vw;