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

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

当您将弹性项目告诉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

在这两种情况下,flex-shrink因子都是1,这意味着允许flex项按比例缩小.

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

而不是flex: 3和flex: 1尝试:

flex: 3 0 0;
flex: 1 0 0;

flexbox规范中的更多细节:7.1.1.的基本价值观flex

但是你可能有另一个问题.你写了:

请注意,项目5和7在css中的设置方式相同,flex值为1.即项目6是项目5和7的高度的3倍.这样,当项目6调整大小时,保持3:1的比率.

这不是flex-grow财产的运作方式.

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

了解有关如何flex-grow在此处工作的更多信息:flex-grow不按预期调整Flex项目的大小

作为替代大小调整方法,您可能希望使用该flex-basis属性.试试flex: 0 0 60%第6 flex: 0 0 20%项,第5和第7项.