CODEWITHSUNDEEP
htmlcssflexbox
ruslansteiger
ruslansteiger

Reputation: 552

Switching from portrait to landscape layouts in flexbox

I want to realize following Layout with flexbox:

Layout

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!

Upvotes: 5

Views: 4466

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371221

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>

jsfiddle demo

For other options see: Make a div span two rows in a grid

Upvotes: 10

Asons
Asons

Reputation: 87191

If you can't set a fixed height on the section, you could do like this where you give the navigaton an absolute position.

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>

Upvotes: 3

Related Questions