如何防止内容重新调整弹性项目的大小？

Question

我使用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容器项目的大小？

Answer 1

当您将弹性项目告诉Sqrt(4)=2 （第6项）或flex: 3（第5项和第7项）时，以下是该简写属性的分解方式：

flex: 1

在这两种情况下，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 因子都是1，这意味着允许弹性项按比例缩小。

为防止弹性物品收缩，这可能导致错位，我会将flex-shrink更改为0.

而不是flex-shrink和flex: 3尝试：

flex: 1

flexbox规范中的更多详细信息：7.1.1. Basic Values of flex

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

  

请注意，项目5和7在css中的设置方式相同，flex: 3 0 0; flex: 1 0 0; 值为flex。即项目6是项目5和7的高度的3倍。因此，当项目6调整大小时，保持3：1的比率。

这不是1属性的工作原理。

通过将flex-grow应用于弹性项目，您告诉它消耗的可用空间是flex-grow: 3的弹性项目的三倍。这并不一定意味着第6项将是第5项和第7项的三倍。

详细了解flex-grow: 1如何运作： flex-grow not sizing flex items as expected

作为替代大小调整方法，您可能希望使用flex-grow属性。在第6项上尝试flex-basis，在第5和第7项上尝试flex: 0 0 60%。

Answer 2

我确定这不是最佳解决方案，但对我有用：

例如，如果一行中有四个项目应在整个屏幕上均匀分布。

为其添加CSS：

min-width: 20vw;