时间戳

首页 > 解决方案 > 使用 flex box 在移动设备上将中间列移动到顶部

css - 使用 flex box 在移动设备上将中间列移动到顶部

问题描述

我有以下 HTML（简化）：

<div class='outer'>
   <div class='nav-prev'></div>
   <div class='content'></div>
   <div class='nav-next'></div>
</div>

我当前的 CSS 是：

.outer {
  display:flex;
}
.content {
  flex-grow:1;
}

这为我提供了桌面的三列布局，带有左右导航按钮（在div.nav-prev和.nav-nextdiv 中）。就像是：

< CONTENT >

但是，在移动设备上，我希望导航按钮位于内容下方（或者可能在上方，我还没有决定）。就像是：

CONTENT
 <   >

我不知道这是否可以通过 flex 实现。我知道我可以使用 更改flex-direction:和重新排序项目order:，但我认为如果没有与桌面 3 列视图不兼容的额外容器 div，我不能将.nav-prev和放在彼此.nav-next下方和旁边。.content

我显然可以有两组导航按钮，根据需要显示和隐藏，但我想知道是否有一种神奇的 flex 方法可以在不加倍按钮的情况下实现这种行为。

标签： cssflexbox

解决方案

根据您的评论：

您可以display: grid;在移动版本中使用。（使用@media查询）

请注意 text-align: center;，border我添加只是为了演示目的。

.outer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
text-align: center;
}

.content { grid-area: 1 / 1 / 2 / 3; border: 1px solid #767676;}
.nav-prev { grid-area: 2 / 1 / 3 / 2; border: 1px solid #767676;}
.nav-next { grid-area: 2 / 2 / 3 / 3; border: 1px solid #767676;}
 <div class="outer">
<div class="nav-prev">PREV</div>
<div class="content">CONTENT</div>
<div class="nav-next">NEXT</div>
</div>

以防万一如果您也想display: grid;在桌面版本中使用。这将是您的桌面代码：

.outer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
text-align: center;
}

.nav-prev { grid-area: 1 / 1 / 2 / 2; border: 1px solid #767676;}
.content { grid-area: 1 / 2 / 2 / 3; border: 1px solid #767676;}
.nav-next { grid-area: 1 / 3 / 2 / 4; border: 1px solid #767676;} 
 <div class="outer">
<div class="nav-prev">PREV</div>
<div class="content">CONTENT</div>
<div class="nav-next">NEXT</div>
</div>

推荐阅读