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

2023年1月25日 212次阅读

我有一个名为#center的容器,我想在其中显示画布和一个按钮.我希望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>

如果我的代码中没有任何按钮,画布占据整个div,但是当我显示按钮时,画布似乎没有调整所需的高度.

> Example 1：没有按钮.
> Example 2.带按钮.

如何使canvas对象调整大小直到可用高度(也是宽度,但它已经在做了)？

提前致谢！

最佳答案 问题是你在行方向flex容器上有对齐内容：flex-start：

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

当容器中有多行时,align-content属性控制横轴中的flex项之间的间距.

当排除按钮元素时,flex容器中只有一行.在这种情况下,align-content没有效果(align-items可以工作).

但是当你添加按钮时,现在有两行换行,对齐内容接管(对齐项不起作用).

由于align-content在代码中设置为flex-start,因此两行都打包到容器的顶部. (对于其他选项,请尝试flex-end,center,space-between,space-around和stretch).

一个有效的解决方案是使用flex-direction：column并将flex：1应用于画布.

#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

点赞