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

我想用 flexbox 实现以下 Layout:

您可以在图片中看到两个方向。左侧为纵向 View ，右侧为横向 View 。

前提是我想让我的 html 尽可能短(如果可能的话)。

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

在纵向 View 中一切正常，因为它只是一列。

现在我被困在横向。

导航应该在屏幕的右侧，其他内容应该在左侧。

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>

非常感谢您的宝贵时间!

最佳答案

为了让这个布局与 flexbox 一起使用，容器上必须有一个固定的高度。否则， flex 元素不知道在哪里换行并且导航元素不会移动到右列。

在这种情况下，布局似乎覆盖了视口(viewport)，因此您应该已经全部设置好了。

只需使用 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>

jsfiddle demo

有关其他选项，请参阅:Make a div span two rows in a grid

关于html - 在 flexbox 中从纵向布局切换到横向布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43988986/