如何使用flex-grow或flex-shrink (行和列)保留图像？

使用flex-grow和flex-shrink属性可以在flex布局中保留图像的大小。

flex-grow属性定义了项目的放大比例，默认为0，即不放大。如果所有项目的flex-grow属性都为0，则它们将等分剩余空间。如果一个项目的flex-grow属性为1，而其他项目都为0，则该项目将占据所有剩余空间。如果一个项目的flex-grow属性为2，而其他项目都为1，则该项目将占据比其他项目多一倍的剩余空间。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，项目将缩小。如果所有项目的flex-shrink属性都为1，则它们将等比例缩小。如果一个项目的flex-shrink属性为0，而其他项目都为1，则空间不足时，该项目不会缩小。

下面是使用flex-grow和flex-shrink属性保留图像的示例代码：

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .item {
    flex: 1 1 auto; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
    max-width: 100%;
  }
</style>

<div class="container">
  <div class="item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="item">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

在上面的示例中，.container是一个flex容器，.item是flex项目。通过设置.item的flex: 1 1 auto;，图像将根据容器的剩余空间等比例放大或缩小，同时保持其原始宽高比例。max-width: 100%;确保图像不会超出其容器的宽度。

腾讯云相关产品和产品介绍链接地址：