如何在容器内弯曲 [重复]答案

【问题标题】：How to Flex within a Container [duplicate]如何在容器内弯曲 [重复]
【发布时间】：2021-09-10 19:13:10
【问题描述】：

当浏览器缩小时，我试图在容器中调整项目。在示例中，它们都按应有的方式包裹，除非包裹时，我希望它包裹在 div 3 的正下方，而不是包裹在 div 1 的下方。我不确定如何直接包裹在 div 2 的下方。

.Flex{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex: 0 0 243px;
}
   

.InnerFlex{
  background: blue;
  width: 242px;
  color: white;
}

.InnerFlex p{
  height: 100px;
}

<div class="Flex">
  <div class="InnerFlex">
    <p>1st</p>
    <p>1stmore</p>
  </div>
  <div class="InnerFlex">
    2nd
  </div>
  <div class="InnerFlex">
    3rd
  </div>
</div>

https://jsfiddle.net/1armuot9/

【问题讨论】：

标签： css flexbox

【解决方案1】：

3div 不适合，所以它被移动到一个新行。 2div 适合，所以它保持在原位。

使用媒体查询在适当的时候添加 "flex-direction: column;"

【讨论】：