时间戳

首页 > 解决方案 > Flexbox 响应式最后一列浮动和堆叠

css - Flexbox 响应式最后一列浮动和堆叠

问题描述

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

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

flexbox 响应式布局

.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>

标签： cssflexboxfrontendresponsive

解决方案

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

推荐阅读