在img上使用flex：1时，Firefox和Chrome之间存在不同的行为。
Code pen demonstrating the behavior的一个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script src="./script.js" defer></script>
</head>
<body>
<section class="container">
<div class="flex"> <h2>Something for the title</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio, totam?</p>
</div>
<img class="flex box-img" src="./Images/blender_render-1280x720_1.jpg" alt="">
</section>
</body>
</html>个字符
如果你在Firefox和Chrome中打开codepen，你会注意到在Firefox中的比例是50%/50%。而在Chrome中，img占据了屏幕的大部分。
我是在研究Firefox的行为，其中Flex项在视口上共享相同的空间。
我找到了一个解决方法，将img封装在一个div中，并将flex应用于div而不是img。我想知道这种行为是否正常。是因为img元素是一个被替换的元素，不符合元素的正常行为吗？
感谢您提前抽出时间。
1条答案
按热度按时间hpxqektj1#
您看到的行为与浏览器如何处理Flex容器中替换元素的内在大小有关。
在Firefox中，默认情况下，图像被视为具有1：1的固有长宽比。因此，当您在容器上使用flex：1时，它会在文本和图像之间均匀分配空间。
在Chrome中，图像以不同的方式考虑其固有大小，它似乎占用了更多的空间，导致文本和图像之间的空间分布不均匀。
通过将图像 Package 在div容器中并将flex属性应用于div，您可以更好地控制容器的伸缩方式，并且可以实现所需的布局。