Umschalten von Hoch- auf Querformat-Layout in Flexbox

Question

Ich mag folgende Layout mit Flexbox realisieren:

Sie beiden Orientierungen in dem Bild sehen können. Linke Seite für die Hochformatansicht und rechts für die Landschaftsansicht.

Die Prämisse ist, dass ich meine HTML so kurz wie möglich halten möchte (wenn es möglich ist).

Gibt es eine Möglichkeit, dies mit Flex zu tun?

In der Hochformatansicht funktioniert alles gut, weil es nur eine Spalte ist.

Jetzt bin ich bei der Ausrichtung der Landschaft fest.

Die Navigation sollte auf der rechten Seite des Bildschirms und der andere Inhalt auf der linken Seite sein.

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>

Vielen Dank für Ihre Zeit sehr viel!

Answer 1

Damit dieses Layout mit der flexbox funktioniert, muss der Container eine feste Höhe haben. Andernfalls wissen Flex-Elemente nicht, wo sie umbrechen sollen, und das Navigationselement wird nicht in die rechte Spalte verschoben.

In diesem Fall scheint das Layout das Ansichtsfenster abzudecken, Sie sollten also alle Einstellungen vornehmen.

Verwenden Sie einfach height: 100vh und die order Eigenschaft. Keine Änderungen am 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/

Answer 2

Wenn Sie auf der section eine feste Höhe nicht festgelegt, können Sie wie folgt tun könnte, wo Sie die navigaton eine absolute Position geben.

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>