我有一个 div
使用 flexbox 来居中它的元素。在这个 div
中,我有 3 个元素,其中一个是图像。
<div id="flex-container">
<div id="container1"></div>
<img src="#" alt="">
<div id="container2"></div>
</div>
#container1
和#container2
有自己的高度,img
应该使用#flex-container里面剩余的高度
。
此代码段适用于 Firefox,但不适用于 Chrome。 ( jsfiddle )
#flex-container{
height: 300px;
width: 500px;
display: flex;
display: -webkit-flex;
flex-flow: column nowrap;
-webkit-flex-flow: column nowrap;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
border: 5px solid black;
}
#container1, #container2{
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
Chrome 需要 flexbox 的 -webkit-
前缀,但问题似乎不是这个。
会发生什么?是浏览器错误还是我忘记了什么?
最佳答案
您需要克服两个问题:
Firefox 可以自行解决这两个问题,但 Chrome 需要帮助。
问题#1
第一个问题是 flex 元素,默认情况下,不能小于它们的内容。 flex 元素的初始设置是 min-height: auto
。
因此,具有替换元素的 flex 元素(如图像)将默认为图像的固有大小。元素无法变小,除非您覆盖初始设置(使用 min-height: 0
)。
#flex-container {
height: 300px;
width: 500px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border: 5px solid black;
}
#container1, #container2 {
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
}
img { min-height: 0; } /* NEW */
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
关于这个问题的完整解释可以在这里找到:
问题#2
然后你遇到了第二个问题:保持纵横比。这是 flex 容器中的常见问题。一种选择是为图像定义高度:
#flex-container {
height: 300px;
width: 500px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border: 5px solid black;
}
#container1, #container2 {
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
}
img { min-height: 0; height: 100px; } /* NEW */
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
关于css - flexbox 中的图像高度在 Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40894381/