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

Question

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

Answer 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%;
  }
}

Answer 2

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

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

How to align image-text divs with flexbox?

css

layout

flexbox

responsive