Moving from portraits to landscape layouts in flexbox
I want to implement the following Layout using flexbox:
You can see both orientations in the picture. Left side for portrait view and right side for landscape view.
The premise is that I want my html to be as short as possible (if possible).
Is there a way to do this using flex?
In portrait mode, everything just works great because it's just one column.
Now I am stuck with landscape orientation.
The navigation should be on the right side of the screen and the other 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>
Thanks a lot for your time!
source to share
For this layout to work with flexbox, the container must have a fixed height. Otherwise the flex items won't know where to wrap them and the nav item won't move to the right column.
In this case, the layout appears to cover the viewport, so you should be fully configured.
Just use the height: 100vh
property too order
. No HTML changes.
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>
For other options see: Create a div spanning two lines in the grid.
source to share
If you cannot set a fixed height to section
, you can do so when you give 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>
source to share