在flexbox中从纵向布局切换到横向布局 [英] Switching from portrait to landscape layouts in flexbox

问题描述

我想用flexbox实现

I want to realize following Layout with flexbox:

You can see both orientations in the picture. Left side for the portrait view and on the right side for the landscape view.

The premise is that I want to keep my html as short as possible (if it is possible).

Is there a way to do this with flex?

In the portrait view everything just works fine because it's just one column.

Now I'm stuck at the landscape orientation.

The navigation should be on the right side of the screen and the other content on the left.

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>

Thank you very much for your time!

解决方案

For this layout to work with flexbox there must be a fixed height on the container. Otherwise, flex items don't know where to wrap and the nav element won't shift to the right column.

In this case, the layout appears to cover the viewport, so you should be all set.

Just use height: 100vh and the order property. No changes to the 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/

这篇关于在flexbox中从纵向布局切换到横向布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！