html - 如果父 div 是 flex 并且它的宽度低于 300 像素，则可以将一个 div 放在另一个下面，而不使用网格？

Question

我需要对此做出响应。应该如下工作。

我在 flex div 中有两个块 div，如下所示：

CSS

.container {
  display: flex;
  border-style: solid;
  border-width: 1px;
}

.image {
  width: 100px;
  height: 100px;
}

HTML

<div class="container">
  <div class="column1">
    <img src="image.jpg" class="image">
  </div>
  <div class="column2">
    <p>This is an image description on the right side. This text should be under the image if div.container width is below 300px.</p>
  </div>
</div>

基于前面代码的当前结果（宽度：~520px）：

但是如果容器宽度低于 300 像素（本例中约为 260 像素），我需要这个结果（不使用网格）：

标签： htmlcssflexbox

Answer 1

flex-wrap CSS 属性设置 flex 项目是强制放在一行还是可以换行到多行，所以你只需添加flex-wrap: wrap到你的容器类