Layout mit flex-box

[var]

Hallo miteinander!

Ich würde das Layout meiner Seite gerne mittels flex-box gestalten, aber ich bekomme es einfach nicht gebacken! Habe mir jetzt schon diverse Tutorials angeschaut, inklusive dem SELF-Tutorial, aber meinem Ziel bin ich dabei leider noch keinen Millimeter näher gekommen.

Ich schätze, ich verstehe einfach die Funktionsweise von flex-box nicht, beziehungsweise ich bin gedanklich wohl noch zu sehr verhaftet im "alten" Boxmodell, dabei erscheint das, was ich umzusetzen gedenke, eigentlich nicht allzu kompliziert...

Es betrifft nämlich im Prinzip erstmal nur drei oder vier Elemente, und zwar <header>, <nav>, <main> und gegebenenfalls <footer>, in zwei Varianten der Anordnung:

   <!--            Für große Bildschirme                             Für kleine Bildschirme  -->
    ____________________________________________________           ____________________________
   |             .------------------------.             |         |   .--------------------.   |
   |             |         HEADER         |             |         |   |       HEADER       |   |
   |             `------------------------´             |         |   `--------------------´   |
   |             .-----. .----------------.             |         |   .--------------------.   |
   |             |     | |                |             |         |   |        NAV         |   |
   |             |     | |                |             |         |   `--------------------´   |
   |    BODY     | NAV | |      MAIN      |             |         | B .--------------------.   |
   |             |     | |                |             |         | O |                    |   |
   |             |     | |                |             |         | D |        MAIN        |   |
   |             |     | |                |             |         | Y |                    |   |
   |             `-----´ `----------------´             |         |   `--------------------´   |
   |             .------------------------.             |         |   .--------------------.   |
   |             |         FOOTER         |             |         |   |       FOOTER       |   |
   |             `------------------------´             |         |   `--------------------´   |
   `----------------------------------------------------´         `----------------------------´

In meiner idealisierten Vorstellung sollte der Seiteninhalt

a) immer zentriert sein und

b) eine min-width: 50% haben, sozusagen als oberes Limit bei sehr großen Bildschirmen und

c) eine max-width: 90%, sozusagen als unteres Limit bei sehr kleinen Bildschirmen und

dazwischen je nach Breite des Anzeigefensters frei skalieren, wobei dann in dem Fall, dass eine gewisse Mindestbreite unterschritten wird, sich das Layout dahingehend verändert, dass <nav> und <main> sich nicht mehr wie zuvor eine Zeile teilen, sondern sie untereinander angeordnet werden.

Solange <nav> und <main> noch in einer Zeile angeordnet sind, sollte <nav> jedoch weniger stark skalieren als <main> und am besten eine min-width und eine max-width haben.

Wie gesagt, klingt erstmal nicht allzu schwierig, aber ich bekomme es einfach nicht auf die Reihe...

Es wäre fantastisch, wenn mir jemand hierbei etwas auf die Sprünge helfen könnte!

Dank und Gruß,

var