在flexbox中从纵向切换到横向布局

Question

我想通过flexbox 实现以下布局:

您可以在图片中看到两个方向.纵向视图的左侧和横向视图的右侧.

前提是我希望尽可能缩短我的HTML(如果可能的话).

有没有办法用flex做到这一点？

在纵向视图中,一切正常,因为它只是一列.

现在我被困在横向.

导航应位于屏幕右侧,其他内容位于左侧.

header, footer, main, nav {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  min-height: 120px;
  border: 1px solid #eebb55;
  background: #ffeebb;
}
section {
  display: flex;
  flex-direction: column;
}
@media only screen and (orientation: landscape) {
  /* no clue */
}

<section>
  <header>header</header>
  <main>content</main>
  <nav>navigation</nav>
  <footer>footer</footer>
</section>

非常感谢您的宝贵时间!

Answer 1

要使此布局与flexbox一起使用,容器上必须有固定的高度.否则,flex项目不知道换行的位置,nav元素也不会移到右列.

在这种情况下,布局似乎覆盖了视口,因此您应该全部设置.

只需使用height: 100vh和order财产.没有对HTML进行任何更改.

section {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header, footer, main, nav {
  flex: 1;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #eebb55;
  background: #ffeebb;
}

@media only screen and (orientation: landscape) {
  section {
    flex-wrap: wrap;
  }
  nav {
    flex-basis: 100%;
    order: 1
  }
}

body { margin: 0; }

<section>
  <header>header</header>
  <main>content</main>
  <nav>navigation</nav>
  <footer>footer</footer>
</section>

https://jsfiddle.net/aysogmqh/1/