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

【问题标题】：Switching from portrait to landscape layouts in flexbox在 flexbox 中从纵向切换到横向布局
【发布时间】：2017-10-14 19:10:36
【问题描述】：

我想用flexbox实现关注Layout：

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

前提是我想让我的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>

非常感谢您的宝贵时间！

【问题讨论】：

好的，您的解决方案可以很好地解决这个问题。但是我现在需要为双方单独滚动，我认为使用这样的 html 语法是不可能的。我必须操作 DOM。取出导航并将部分和导航高度设置为 100vh 并溢出以滚动。 Flex 和 Grid 不适合我的问题。我有点失望。但是非常感谢@Michael_B ;)

标签： html css flexbox

【解决方案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>

jsfiddle demo

其他选项见：Make a div span two rows in a grid

【讨论】：

【解决方案2】：

如果您无法在section 上设置固定高度，您可以这样做，给navigaton 一个绝对位置。

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) {
  section {
    position: relative;
  }
  header, footer, main {
    width: calc(60% - 10px);         /*  10px is for the margin  */
    box-sizing: border-box;
  }
  nav {
    position: absolute;
    top: 0;
    min-height: calc(100% - 10px);   /*  10px is for the margin  */
    right: 0;
    width: calc(40% - 10px);         /*  10px is for the margin  */
    box-sizing: border-box;
  }
}

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

【讨论】：

是的，这也很有效。但现在我希望双方都有单独的滚动。而且我认为如果没有 DOM 操作，这是不可能的。 :( 我很失望。但感谢您的时间@LGSon
@SuddenlyRust 当然他们可以有单独的卷轴。是应该滚动的内容和导航吗？
header + main + footer 应该有一个滚动条（用于屏幕左侧）和用于屏幕右侧的导航。
@SuddenlyRust 在此处添加了您的问题的答案：stackoverflow.com/questions/43879208/…