Flexbox 响应式最后一列浮动和堆叠答案

【问题标题】：Flexbox responsive last column floated and stackedFlexbox 响应式最后一列浮动和堆叠
【发布时间】：2020-04-06 06:51:13
【问题描述】：

为神秘的标题道歉，但不知道如何措辞。想知道这种响应式布局是否可以使用 flexbox。

我可以轻松地做一个或另一个 - 但我很难在没有创建两个不同的 html 布局的情况下实现以下目标。这甚至可能吗？

.body {
  display: flex;
  flex-direction: column;
}

.main {
  display: flex;
  flex-direction: row;
}

<div class="body">
  <div class="main">
    <div class="1">Div 1</div>
    <div class="2">Div 2</div>
  </div>
  <div class="secondary">
    <div class="3">Div 3</div>
  </div>
</div>

【问题讨论】：

这就是 css-grid 的设计目的。
告诉 IE...
如果没有至少固定高度的列，你不能用 flexbox 做到这一点
你需要 grid 和 mediaquerie 来做这个，关于旧的 IE，你还需要告诉每个 div 在网格中的位置。所有 div 都必须是兄弟姐妹。 display:contents 不是 IE 的选项。每个显示都有它的特殊性，没有一个包含魔法:(你也可以在彼此之上放置 2 个网格，但你可能会遇到一些麻烦codepen.io/gc-nomade/pen/rNaLZGB

标签： css flexbox frontend responsive

【解决方案1】：

您需要使用@media queries 来确定屏幕的大小并相应地调整您的大小。即便如此，仅在移动设备上将 3 滑到 1 和 2 下可能是个窍门。尝试使用溢出将其推入适当的区域。不过，其中大部分是基本的 CSS；你不需要 flexbox。

【讨论】：