如何将图像文本 div 与 flexbox 对齐？答案

【问题标题】：How to align image-text divs with flexbox?如何将图像文本 div 与 flexbox 对齐？
【发布时间】：2021-03-17 18:58:50
【问题描述】：

我能够做到直到网格的第二行，但我对如何使用 flexbox 设置 div 使其看起来像移动视图中的图像感到困惑。我应该把这 3 个小 div 放在一个更大的 div 中吗？还是网格中的网格在这里效果最好？此外，这 3 个 div 应该是单独的 flexbox，以像移动视图中的图像一样显示，对吧？

【问题讨论】：

标签： css layout flexbox responsive

【解决方案1】：

您可以将底部 3 个 div 放置在容器 div 中并将其设置为 flex。然后使用媒体查询来控制您的响应式视图并将其设置为 flex-direction: column 以便 div 堆叠。

<div class="container>
  <div class="one">
  </div>

  <div class="two">
  </div>

  <div class="three">
  </div>
</div>

.container {
  display: flex;
}

// then at mobile width or whatever width you want, set the flex-direction to `column` so the divs are stacked and set the div widths to 100%;
@media only screen and (max-width: 600px) { 
  .container {
    flex-direction: column;
  }
  .one, .two, .three {
    width: 100%;
  }
}

【讨论】：

这不是唯一的问题。小 div 中的图像和文本也必须像图片中那样重新排列。

【解决方案2】：

自己解决了。绿色框中的所有内容都必须是弹性的。

【讨论】：