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

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

原文由 jars121 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当您将 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

在这两种情况下， 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: 3 应用到弹性项目，您告诉它占用的可用空间是使用 flex-grow: 1 的弹性项目的三倍。这并不一定意味着第 6 项的大小是第 5 项和第 7 项的三倍。

在此处详细了解 flex-grow 的工作原理： flex-grow not sizing flex items as expected

作为另一种调整大小的方法，您可能需要使用 flex-basis 属性。在项目 6 上尝试 flex: 0 0 60% flex: 0 0 20% 在项目 5 和 7 上尝试 —。

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

以下解决方案可用于保持列包含所有可用空间：在其他列上使用增长和收缩为 0，并将 flex-grow=1 设置为全宽列，例如（ CodePen ）：

 function update() {
  var text =
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.";
  document.querySelector(".three").innerHTML = text;
}

 .container > div:not(.three) {
  flex-grow: 0;
  flex-shrink: 0;
}

.one { width: 10%; }
.two { width: 200px; }

.three { flex-grow: 1; }

.four { width: 200px; }
.five { width: 10%; }

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  background: tomato;
  display: flex;
  height: 100%;
}

.container > div:nth-child(even) {
  background-color: green;
}

.three { background: yellow; }

 <div class="container">
  <div class="one"> one </div>
  <div class="two"> two <br />
    <button onclick="update()">update</button>
  </div>
  <div class="three"> three </div>
  <div class="four"> four </div>
  <div class="five"> five </div>
</div>

原文由 Putin - The Hero 发布，翻译遵循 CC BY-SA 4.0 许可协议