display flex 和 block 是如何工作的？答案

【问题标题】：How display flex and block works?display flex 和 block 是如何工作的？
【发布时间】：2021-03-12 12:45:38
【问题描述】：

我有两个容器。外容器是包裹内容器。内容器是包裹两个潜水。对于内部容器 CSS 是 display flex。对于小屏幕尺寸，我提到了使用不起作用的媒体请求的显示块。我做错了什么。对于小屏幕，两个 div 应该堆叠起来。为什么媒体请求不起作用？什么时候应该给图像最大宽度？

 .row2{
        display: flex;
        padding:2em 3em;
        }
        .outercontainer{
          background-color: darkgray;
        }
        @media (min-device-width: 426px) and (max-device-width: 764px) and (-webkit-min-device-pixel-ratio: 2) {
          .row2{
            display: block;
            padding: 0.1em;
            }
            .image2{
              width: 100%;
            }
        }

        <div class="outercontainer">
                    <div class="innercontainer row2">
                        <div class="col text">
                            <h3>title text</h3>
                            <p>This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text</p>
                        </div>
                        <div class="col image">
                        <img class="image2" src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8bmF0dXJlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
                        </div>
                    </div>
                </div>

【问题讨论】：

当视口宽度变小时，您是否希望图像换行到文本下方的下一行？
是的。文本在顶部，图像在文本下方的下一行

标签： html css

【解决方案1】：

在您的媒体查询中将flex-direction: column 添加到Flexbox 容器.row2 会在较小的视口处创建一个堆叠的“列”布局，因此图像会显示在文本下方。媒体查询 max-width 的值可能需要稍微提高到 1000 像素左右，以便 flex-direction 列布局发生得更快，并且图像旁边的文本不会出现挤压。试试这个。

此外，device-width 媒体功能已被弃用，不再推荐。在媒体查询中使用 min-width 和 max-width 作为长度值。

.row2 {
  display: flex;
  padding:2em 3em;
}
.outercontainer {
  background-color: darkgray;
}

/* 764px max-width makes the image squish the text, try around 1000px */
@media (min-width: 426px) and (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 2) {
  .row2 {
    display: flex;
    flex-direction: column;
    padding: 0.1em;
  }
  .image2 {
    width: 100%;
  }
}

<div class="outercontainer">
  <div class="innercontainer row2">
      <div class="col text">
          <h3>title text</h3>
          <p>This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text This is simple test text</p>
      </div>
      <div class="col image">
      <img class="image2" src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8bmF0dXJlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
      </div>
  </div>
</div>

【讨论】：

@Ash 你什么意思？上面的代码 sn-p 工作正常。您还在寻找其他东西吗？
我在我的代码中尝试过，但在那里不起作用。
那么你的代码中一定还有其他潜在的问题。如果您使用min-device-width 和max-device-width，则不推荐使用这些媒体长度值，并且媒体查询将不会运行。您可以在上面的代码 sn-p 中看到它工作正常。确保您没有任何其他样式阻碍事物。