html - 当引入第二个 flex 元素时， flex 元素不会占用容器中的可用空间

Question

我有一个名为 #center 的容器，我想在其中显示 canvas 和一个 button。我希望 canvas 对象占用所有可用空间(尊重容器内的按钮)。

这是我的代码:

html, body {
  width: 100%;
  height: 100%;
}
#container {
  display: flex;
  height: 100%;
  background-color: blue;
}
.block {
  flex: 1;
}
#left {
  background-color: green;
}
#center {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-content: flex-start;
}
#right {
  background-color: orange;
}

#canvasObject {
  display: block;
  margin: 0 auto;
  border: 1px solid;
  background-color: yellow;
}

<div id="container">
  <div id="left" class="block">Left</div>
  <div id="center" class="block">
    <canvas id="canvasObject">Your browser does not support Canvas.</canvas>
    <button type="button">Click!</button>
  </div>
  <div id="right" class="block">Right</div>
</div>

如果我的代码中没有任何 button，canvas 会占据整个 div 但是当我显示 button，canvas 似乎无法调整所需的高度。

• Example 1 : 没有按钮。
• Example 2 .带按钮。

我怎样才能使 canvas 对象调整大小直到可用的 height(还有 width 但它已经这样做了)？

提前致谢!

Answer 1

问题是您在行方向 flex 容器上有 align-content: flex-start:

#center {
    display: flex;
    flex: 1;
    flex-wrap: wrap;  
    align-content: flex-start;    /* <-- source of the problem */
}

当容器中有多行时，align-content 属性控制横轴上 flex 元素之间的间距。

当排除button元素时，flex容器中只有一行。在这种情况下，align-content 无效(align-items 可以)。

但是当您添加按钮时，现在有两行换行，align-content 接管(align-items 不起作用)。

由于 align-content 在您的代码中设置为 flex-start，所以这两行都被打包到容器的顶部。 (对于其他选项，请尝试 flex-end、center、space-between、space-around 和 拉伸(stretch)).

一个有效的解决方案是使用 flex-direction: column 并将 flex: 1 应用于 canvas。

#center {
    display: flex;
    flex-direction: column;        /* new; stack flex items vertically */
    flex: 1;
    flex-wrap: wrap;  
    /* align-content: flex-start;  <-- remove; not necessary */
}

#canvasObject {
    flex: 1;                        /* new; consume all available free space */
    /* display: block;              <-- remove; not necessary */
    /* margin: 0 auto;              <-- remove; not necessary */
    border: 1px solid;
    background-color: yellow;
}

Revised Fiddle

---

W3C 引用资料:

• 8.4. Packing Flex Lines: the align-content property
• 8.3. Cross-axis Alignment: the align-items and align-self properties