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似乎不合适调整所需的height。

Example 1：没有按钮。
Example 2。带按钮。

如何使canvas对象重新调整大小，直到可用height（也width，但它已经在执行此操作）？

提前致谢！

Answer 1

问题是你在行方向灵活容器上有align-content: flex-start：

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

当容器中有多行时，align-content属性控制横轴中弹性项目之间的间距。

排除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参考文献：

引入第二个弹性项目时，Flex项目不会占用容器中的可用空间

1 个答案:

Revised Fiddle