flexbox 一个元素固定高度，其他填充
Posted
技术标签:
【中文标题】flexbox 一个元素固定高度，其他填充【英文标题】：flexbox one element fixed height, other filling 【发布时间】：2014-10-07 22:58:33 【问题描述】：我想用下面的一些描述性文字制作某种图像查看器。问题是，带有描述的下部框具有固定的高度，并且图像应该填充它所在容器的剩余高度。
我想为此使用 flexbox，因为我认为它似乎是最优雅和最简单的解决方案（不使用 JS）。 这是我当前工作的代码和代码笔，这似乎主要工作：
html, body, #container
height: 100%
#container
display: flex;
flex-direction: column;
#container > #image
/* flex-grow: 1; */ /* not needed here? */
max-width: 75%;
background-color: #fcc;
margin: 0 auto;
img
max-height: 100%;
/* HERE IS WHERE MY PROBLEM STARTS!; */
max-width: 100%;
#container > #text
flex-grow: 0;
flex-shrink: 0;
background-color: rgba(128, 128, 128, 0.7);
padding: 5px;
max-width: 75%;
margin: 15px auto 0;
/* TOP MARGIN DOESN'T WORK */
http://codepen.io/Kageetai/pen/AaCJy
我得到了大部分的工作，但图像没有正确调整大小。正如您通过文本框的透明背景所看到的那样，它在包含 div 的边框甚至在文本框的后面延伸。 那么如何在容器内保留具有正确纵横比的图像呢？
此外，在调整窗口大小时，margin: 0 auto; 的居中似乎会产生问题。图片不再居中，页面需要刷新才能再次工作。
那么有人知道如何使图像表现正确吗？ :)
【问题讨论】：
我很惊讶这在我之前没有被赞成。感谢您发布问题 Kageetai :) 【参考方案1】：这里有一个更基本的演示，说明如何实现这一点。
<html style="height: 100%">
<body style="height: 100%; margin: 0; display: flex; flex-direction: column">
<p>Toolbar</p>
<div style="background: #bbb; flex: 1">Image</div>
</body>
</html>
可以在Codepen查看演示。
【讨论】：
【参考方案2】：对于图片，您可以设置高度、边距和显示。
对于图像容器，为 flex 指定 2 或 3 值，而为其他值不指定，以便它填充尽可能多的空间。
DEMO
使用的 CSS ：
html,
body,
#container
height: 100%
#container
display: flex;
flex-direction: column;
#container > #text
background-color: #ccf;
padding: 5px;
#container>#image
flex:3;
display:flex;
img
width:auto;
display:block;
margin:auto;
height:100%;
【讨论】：
Chrome 36，我刚刚看到它可以在 Firefox 中运行！但是图像容器上的display:flex; 有原因吗？
ah :) , oki , 对于 chrome 我们需要告诉它更多: 检查这个: codepen.io/anon/pen/EdtsC (flex-direction 和 min/height 而不是简单的高度。原因是触发一些 flex 特殊性访问其他无法使用的 css 规则（最大高度需要一个具有有效值的高度来继承可用的引用，flex 允许忽略它#image 在 CSS 中没有高度，只是一个 flex 值；））
@Kageetai 实际上，FF 需要过滤：codepen.io/gc-nomade/pen/eJhnc ...但我相信 IE 仍然失败
嘿，谢谢，这似乎最有效，但我仍然注意到图像的纵横比有一个小错误。例如，当我将 codepen 预览窗格的大小调整为高度时，图像的高度为 600px（原始高度），宽度为 972px，其中 900px 是原始高度。
为什么这仅适用于增长图像 - 如果图像的高度大于容器中的高度，则不会调整大小：codepen.io/anon/pen/XmLGZq以上是关于flexbox 一个元素固定高度，其他填充的主要内容，如果未能解决你的问题，请参考以下文章
使锚标记填充父 flex 元素的 100% 高度和宽度，同时垂直和水平居中