如何使用CSS Flexbox包装行项目？

Question

我对CSS Flexbox还是很陌生，但是我试图创建一个水平卡，其中图像在左侧，文本/按钮在右侧。当网站按比例缩小（供移动使用）时，行项目应换行，并且图像应位于文本的顶部。我尝试将wrap属性设置为wrap，但是当它只应包装在较小的屏幕上时，它将包装在大屏幕上。参见下面的代码：

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 200px;
}

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
  width: 70%;
  margin: auto;
}

#inner-container {
  border: solid 1px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

<div id="outer-container">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
  <div id="inner-container">
    <div>
      <h3>Heading</h3>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
      Other stuff
    </div>
  </div>
</div>

我应该尝试使用其他方法（例如Bootstrap的卡布局）还是明显缺少某些东西？

Answer 1

将 a 设置flex-basis为文本容器以控制何时进行换行。

全屏打开以下内容并调整大小即可查看：

* {
  margin: 0;
  padding: 0;
}

#box {
  padding: 20px;
}

img {
  width: 200px;
}

#outer-container {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px;
  width: 70%;
  margin: auto;
}

#inner-container {
  border: solid 1px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  
  flex-basis:500px;
  flex-grow:1;
}

<div id="outer-container">
  <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="cat">
  <div id="inner-container">
    <div>
      <h3>Heading</h3>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
      Other stuff
    </div>
  </div>
</div>