在 img 上使用 flex:1 时，Firefox 和 Chrome 之间存在不同的行为。
<!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>
.box-img{
width: 100%;
background-color: red;
display: block;
}
.container{
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.flex{
flex:1;
background-color: brown;
}
如果您在 Firefox 和 Chrome 中打开 codepen，您会注意到在 Firefox 中该比例为 50%/50%。 在 Chrome 中，img 占据了屏幕的大部分。
我关注的是 Firefox 的行为，其中 Flex 项目在视口上共享相同的空间。
我找到了一种解决方法，将 img 封装在 div 中，并将 flex 应用于 div 而不是 img。 我想知道这种行为是否正常。是不是因为img元素是被替换的元素，不符合元素的正常行为？
感谢您提前抽出时间。
您所看到的行为与浏览器如何处理 Flex 容器中被替换元素的固有大小有关。
在 Firefox 中，默认情况下图像的固有长宽比被视为 1:1。因此，当您在容器上使用 flex: 1 时，它会在文本和图像之间均匀分配空间。
在 Chrome 中，图像以不同的方式考虑其固有大小，并且它似乎占用了更多空间，导致文本和图像之间的空间分布不均匀。
通过将图像包装在 div 容器中并将 flex 属性应用于 div，您可以更好地控制容器的弯曲方式，并且可以实现所需的布局。