底部的 Flexbox 图像间隙答案

【问题标题】：Flexbox image gap on bottom底部的 Flexbox 图像间隙
【发布时间】：2021-06-25 09:25:57
【问题描述】：

所以我尝试了 flexbox。在小型设备（最大宽度

我只在 google-chrome 浏览器上遇到这种奇怪的行为。在 Firefox 中，它按预期工作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');

    body {
      margin: 0;
      padding: 0;
      font-family: "Nunito";
      font-size: 1.1rem;
    }

    #div-4 {
      padding: 5%;
    }
    
  .flex-container {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      background-color: #ffb265;
  }

  .flex-child {
      flex: 1;
  }

  img {
    width: 100%;
    height: 100%;
  }

@media only screen and (max-width: 800px){

    .flex-container {
      flex-direction: column;
    }

    #div-3 {
      order: 2;
    }
}
  </style>
</head>
<body>
  <div class="flex-container">
    <div id="div-3" class="flex-child">
      <img src="https://dummyimage.com/16:9x1080" alt="Dummy Image">
    </div>
    
    <div id="div-4" class="flex-child">
      <h1>Lorem ipsum</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iste, ex accusamus quam saepe nesciunt sequi in quod nobis aspernatur aperiam facilis vero excepturi maxime laboriosam dolorem necessitatibus recusandae debitis omnis esse nisi numquam hic sed optio! Eveniet, reprehenderit. Aut iure eum error saepe consequuntur soluta voluptate sed possimus natus, quae nostrum rem nesciunt assumenda delectus magnam quibusdam voluptates quod iusto provident libero perspiciatis! Ipsam hic iste inventore perferendis ea architecto et repellendus, consequuntur porro corporis, ratione odio error corrupti sunt rerum cum maiores quas magni at, iure quo molestiae aut laudantium? Cumque asperiores optio dignissimos earum, nisi molestiae aliquam.</p>
    </div>
  </div>


  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, nam enim delectus asperiores nemo, officia ullam minus quos quis autem fugiat odit sequi blanditiis, labore similique animi corrupti necessitatibus tempora?
  </div>

  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, nam enim delectus asperiores nemo, officia ullam minus quos quis autem fugiat odit sequi blanditiis, labore similique animi corrupti necessitatibus tempora?
  </div>

</body>
</html>

【问题讨论】：

可能line-height 有点古怪。将line-height: 0 添加到#div-3 似乎可以解决问题。
@TARN4T1ON 是的，你是对的！你能解释一下这种奇怪想法的原因吗？
将display: block 添加到您的图像将删除图像下方的空间。这个空间是为下降者准备的。请参阅此stackoverflow.com/a/5804278/1011984 了解更多信息。

标签： html css flexbox frontend

【解决方案1】：

只需添加此代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');
        body {
            margin: 0;
            padding: 0;
            font-family: "Nunito";
            font-size: 1.1rem;
        }
        
        #div-4 {
            padding: 5%;
        }
        
        .flex-container {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            background-color: #ffb265;
        }
        
        .flex-child {
            flex: 1;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        @media only screen and (max-width: 800px) {
            .flex-container {
                flex-direction: column;
            }
            #div-3 {
                order: 2;
                /* add this */
                display: flex;

            }
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div id="div-3" class="flex-child">
            <img src="https://dummyimage.com/16:9x1080" alt="Dummy Image">
        </div>

        <div id="div-4" class="flex-child">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iste, ex accusamus quam saepe nesciunt sequi in quod nobis aspernatur aperiam facilis vero excepturi maxime laboriosam dolorem necessitatibus recusandae debitis omnis esse nisi numquam
                hic sed optio! Eveniet, reprehenderit. Aut iure eum error saepe consequuntur soluta voluptate sed possimus natus, quae nostrum rem nesciunt assumenda delectus magnam quibusdam voluptates quod iusto provident libero perspiciatis! Ipsam
                hic iste inventore perferendis ea architecto et repellendus, consequuntur porro corporis, ratione odio error corrupti sunt rerum cum maiores quas magni at, iure quo molestiae aut laudantium? Cumque asperiores optio dignissimos earum, nisi
                molestiae aliquam.</p>
        </div>
    </div>


    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, nam enim delectus asperiores nemo, officia ullam minus quos quis autem fugiat odit sequi blanditiis, labore similique animi corrupti necessitatibus tempora?
    </div>

    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, nam enim delectus asperiores nemo, officia ullam minus quos quis autem fugiat odit sequi blanditiis, labore similique animi corrupti necessitatibus tempora?
    </div>

</body>

</html>

【讨论】：