5

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!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
ruslansteiger
  • 462
  • 1
  • 8
  • 21
  • Okay your solution works fine for this problem. But I need now seperate scroll for both sides and I think it's not possible with the html syntax like that. I have to manipulate the DOM. Take the nav out and set section and nav height to 100vh and overflow to scroll. Flex and Grid is not suited for my problem. I am kinda disappointed. But thank you very much @Michael_B ;) – ruslansteiger May 16 '17 at 19:21

2 Answers2

10

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
3

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Yeah thanks this works too. But now I want both sides to have seperate scroll. And I think this is not possible without DOM manipulation. :( I am disappointed. But thanks for your time @LGSon – ruslansteiger May 16 '17 at 19:26
  • 1
    @SuddenlyRust Of course they can have separate scroll. Is it the content and the navigation that should scroll? – Asons May 16 '17 at 19:28
  • header + main + footer should have one scroll (for the left side of the screen) and navigation for the right side of the screen. – ruslansteiger May 16 '17 at 19:41
  • 1
    @SuddenlyRust Added an answer to your question here: http://stackoverflow.com/questions/43879208/add-scroll-to-each-column-in-css-grid-layout – Asons May 17 '17 at 13:01