Der ultimative Leitfaden zur Flexbox

1. Flexbox im Überblick

2. Flexbox Basics

Main and Cross Axis

Flex Containers und Items

3. Flex Containers Eigenschaften

flex-direction

flex-wrap

justify-content

align-items

align-content

flex-flow

5. Beispiele von Flexbox

Vertikale und horizontale Zentrierung von Elementen

Responsive Navigationsleiste mit Suche

Das Layout des Heiligen Grals

6. Andere Ressourcen

Überblick

Das Flexbox Layout ist offiziell als CSS Flexible Box Layout Module anerkannt und ist ein neues Layoutmodell in CSS3.

Flexbox hat ein eindimensionales Layout, d. h. es steuert Elemente in einer Dimension auf einmal, entweder als Zeile oder als Spalte, aber nicht beides zusammen. Das kann dem zweidimensionalen Modell - CSS Grid Layout, das die Elemente gleichzeitig in zwei Dimensionen (Zeilen und Spalten zusammen) steuert, entgegengesetzt werden.

Flexbox wurde als Alternative zu CSS-Floats eingeführt, um das Gesamtbild einer Webseite zu erstelln. Flexbox kommt mit vielen Vorteilen, insbesondere mit ihm können Sie die Ausrichtung, Richtung, Reihenfolge und Größe der Elemente steuern.

Die Items innerhalb des Flex Containers:

• können in jede Richtung (nach links, rechts, unten oder sogar nach oben) organisiert werden (Flex-Richtung).
• können eine direkte (von links nach rechts) oder umgekehrte (von rechts nach links) Reihenfolge haben.
• können "flex" Breite und Höhe haben, um den verfügbaren Raum zu füllen (Flex-Item).
• können so eingestellt werden, dass er dynamisch entlang der Hauptachse zuklappt oder sich ausdehnt und in der Zwischenzeit die Größe der sekundären Querachse beibehält.
• können linear entlang der Hauptachse organisiert werden oder in mehrere Linien entlang oder quer zur Querachse eingewickelt werden.

Flexbox ist relativ neu, aber wird es heute von Browsern ausgezeichneterweise unterstützt (fast 83% der Browser unterstützen es).

(Erfahren Sie mehr über Browserunterstützung und Kompatibilität).

Flexbox Basics

Wenn Sie mit Flexbox arbeiten, müssen Sie in zwei Achsen denken Hauptachse und Querachse, und sollen zwischen Flexcontainern und Flex Items.unterscheiden.

Hauptachse und Querachse

Flexbox ist einachsig orientiert, es hat Hauptachse und Querachse . Das bedeutet, dass die Items entweder entlang der Hauptachse oder quer zur Hauptachse verlegt werden. Die Querachse ist immer senkrecht zur Hauptachse.

Die Hauptachse wird durch die Eigenschaft flex-direction, die die folgenden Werte hat, definiert:

• row
• row-reverse
• column
• column-reverse

Wenn die Eigenschaft flex-direction den Wert row oder row-reverse hat, dann ist Ihre Hauptachse horizontal, d. h. entlang der Zeile in Inline-Richtung. Und die Querachse läuft die Spalten herunter.

Wenn die Eigenschaft flex-direction den Wert column oder column-reverse hat, ist dann die Hauptachse vertikal, d. h. von oben nach unten in Blockrichtung. Was die Querachse betrifft, so verläuft sie entlang der Reihen.

Schauen Sie sich diese Figur an, um das Konzept hinter der Flexbox-Achse besser zu verstehen.

• main axis- Die Hauptachse eines Flex-Containers ist die Hauptachse, entlang derer die Flex-Items angeordnet werden.
• main-start | main-end - Die Flex-Items werden vom main-start bis zum main-end innerhalb des Containers platziert.
• main size - Die Breite oder Höhe eines Flex-Items, je nachdem, was in der Hauptabmessung ist, ist die Hauptgröße des Items.
• cross axis - Die Achse ist senkrecht zur Hauptachse. Seine Richtung hängt von der Hauptachsenrichtung (horizontal oder vertikal) ab.
• cross-start | cross-end - Flex-Linien werden mit Items gefüllt und in den Container gelegt, gestartet von der Cross-Startseite des Flex-Containers und abgeschlossen von der Richtung der Cross-End-Seite.
• cross size - Die Breite oder Höhe eines Flex-Items, je nachdem, was in der Cross Dimension ist, ist die Crossgröße des Items.

Flex Containers und Items

Flex container ist ein übergeordnetes Element, das ein Bündel von untergeordneten Elementen Flex Items gruppiert. In den meisten Fällen definiert der Container das Layout und die Position seiner Flex Items, jedoch können Flex Items individuell manipuliert werden.

Um ein HTML-Element in Flex-Container umzuwandeln, müssen Sie die Eigenschaft display mit dem Wert flex (Block-Level Flex Container Box) oder inline-flex (definiert Inline-Level Flex Container Box) verwenden. Ansonsten wird der Browser alle von Ihnen verwendeten Flexbox-Eigenschaften ignorieren.

.container {
  display: flex; /* or inline-flex*/
}

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;    /* OLD - Firefox 19- (Buggy, funktioniert aber hauptsächlich) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+

Die Eigenschaften von Flex Container

Die Eigenschaft flex-direction

Die Eigenschaft flex-direction wird für die Erstellung von Zeilen- und Spaltenlayouts verwendet. Sie legt die Richtungen der Hauptachse des Flexcontainers und die Reihenfolge, in der die Positionen erscheinen, fest.

Die Eigenschaft flex-direction hat folgende Werte:

• row - die Items werden entlang der Zeile von links nach rechts angezeigt.
• row-reverse - die Items werden von rechts nach links angezeigt.
• column - die Items werden vertikal von oben nach unten angezeigt.
• column-reverse - die Items werden vertikal von unten nach oben angezeigt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      flex-direction: row-reverse;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 120px;
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

In unserem Beispiel sind die Positionen in umgekehrter Reihenfolge angeordnet. Ändern Sie die Werte für die Eigenschaft flex-direction property (row, column, column-reverse) um zu sehen, wie sich das Aussehen der Elemente ändert.

Die Eigenschaft flex-wrap

Voreingestellt passen alle Flex-Items auf eine Zeile, und wenn die Flex-Items zu breit für den Container sind, werden den überlaufen. Um das zu verhindern, müssen Sie die Eigenschaft flex-wrap verwenden, um die Elemente zu umhüllen.

Die Eigenschaft kann die folgenden Werte haben:

• nowrap (voreingestellt) - Flex-Items werden in einer Zeile angezeigt, standardmäßig passen sie zur Breite des Flex-Containers.
• wrap - Flex-Items werden bei Bedarf in mehreren Zeilen von links nach rechts und von oben nach unten angezeigt.
• wrap-reverse - Flex-Items werden bei Bedarf in mehreren Zeilen von links nach rechts und von unten nach oben angezeigt.

Die Eigenschaft justify-content

Die Eigenschaft justify-content wird verwendet, um die horizontale Ausrichtung von Items entlang der Hauptachse zu definieren. Es hilft bei der Verteilung des freien Platzes zwischen den Flex-Items auf der Hauptachse.

Die Werten für justify-content sind folgende:

• flex-start (voreingestellter Wert) - Die Items werden am Anfang des Containers positioniert.
• flex-end - Die Items werden am Ende des Containers positioniert.
• center - Die Items werden in der Mitte des Containers positioniert.
• space-between - Die Items werden gleichmäßig (mit Leerzeichen dazwischen) in der Zeile verteilt; erstes Item ist auf der Startzeile, letztes Item auf der Endzeile.
• space-around - Die Items werden mit Leerzeichen vor, zwischen und nach angezeigt.
• space-evenly - Die Items werden so verteilt, dass der Abstand zwischen zwei beliebigen Items (und der Abstand zu den Rändern) gleich ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      justify-content: space-around;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 120px; 
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Ändern Sie den Wert der Eigenschaft justify-content, um zu sehen, wie die Items ausgerichtet werden.

Die Eigenschaft align-items

Die Eigenschaft align-itemsient zum Ausrichten von Objekten entlang der Querachse. Es ist genau das Gegenteil der Eigenschaft justify-content, die die Items entlang der Hauptachse ausrichtet.

Die Werte für align-items sind folgende:

• stretch (default) - Die Items werden gedehnt, um den Container zu füllen.
• flex-start - Die Items werden bis zum Cross Start des Containers gestapelt.
• flex-end- Die Items werden bis zum Cross End des Containers gestapelt.
• center- Die Items werden in der Mitte der Querachse gestapelt.
• baseline - Die Items werden so ausgerichtet, wie ihre Grundlinien ausgerichtet sind.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      align-items: center; /* Verwenden Sie einen anderen Wert, um das Ergebnis zu sehen. */
      height: 300px;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 25%;
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

In unserem Beispiel haben wir den Wert center verwendet, um die Items in der Querachse zu zentrieren. Testen Sie andere Werte und sehen Sie sich das Ergebnis an.

Die Eigenschaft align-content

Die Eigenschaft align-content wird verwendet, um die Linien eines flexiblen Containers innerhalb des Containers auszurichten, wenn es einen zusätzlichen Platz in der Querachse gibt, genau wie justify-content einzelne Items innerhalb der Hauptachse ausrichtet.

Die Werten für align-content und ihre Bedeutungen sind folgende:

• stretch (voreingestellt) - Die Zeilen dehnen sich aus, um den verfügbaren Platz einzunehmen.
• flex-start - Die Zeilen werden am Anfang des Containers gepackt.
• flex-end - Die Zeilen werden am Ende des Containers gepackt.
• center - Die Zeilen werden in die Mitte des Containers gepackt.
• space-between - Die Zeilen werden gleichmäßig verteilt; die erste Zeile befindet sich am Anfang des Containers, die letzte am Ende.
• space-around - Die Zeilen werden gleichmäßig mit gleichem Abstand um jede Zeile verteilt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between /* Verwenden Sie einen anderen Wert, um das Ergebnis zu sehen. */;
      min-height: 300px;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 120px;
      padding: 5px 0;
      margin: 8px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>

Die Eigenschaft flex-flow

Das ist eine abkürzte Eigenschaft für individuelle Eigenschaften flex-direction und flex-wrap, die zusammen die Haupt- und Querachsen des Flexcontainers definieren. Voreingestellter Wert ist row nowrap.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      flex-flow: column-reverse wrap; /* Verwenden Sie einen anderen Wert, um das Ergebnis zu sehen. */
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 120px;
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Sie können andere Werte wählen, um zu sehen, wie sich die Position der Items ändert.

Die Eigenschaften von Flex Item

Die Eigenschaft order

Voreingestellt werden die Elemente in der Reihenfolge angeordnet, in der sie im Quellcode erscheinen (wächst von der niedrigsten Ordnungszahl zum höchsten). Um die Reihenfolge der Items im Flex-Container zu ändern, wird die Eigenschaft order verwendet.

Die Eigenschaft order stellt die Reihenfolge der Flex-Items durch Zuordnung zu Ordinalgruppen ein. Es wird ein einzelner Wert integer der die Ordinalgruppe, zu der das Flex Item gehört, definiert, benötigt. Der Standardwert beträgt 0.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
      display: flex;
      width: 90%;
      height: 150px;
      background: #c3c3c3;
      }
      .main div { width: 20%; height: 90px; }
      div.item-blue { order: 2; }
      div.item-yellow { order: 4; }
      div.item-red { order: 3; }
      div.item-green { order: 1; }
      /* Ändern Sie die Zahlen, um zu sehen, wie die Items wieder geordnet werden */
    </style>
  </head>
  <body>
    <h1>Die Eigenschaft order</h1>
    <div class="main">
      <div style="background-color:#1c87c9;" class="item-blue"></div>
      <div style="background-color:yellow;" class="item-yellow"></div>
      <div style="background-color:red;" class="item-red"></div>
      <div style="background-color:#8ebf42;" class="item-green"></div>
    </div>
  </body>
</html>

Die Eigenschaft align-self

Die Eigenschaft dient zum individuellen Ausrichten von Items innerhalb des Flex-Containers. Flex-Items werden in der Querachse der Linie des Flex-Containers ausgerichtet (wie justify-content, aber in senkrechter Richtung). Beim Einstellen der Eigenschaft align-self wird die durch align-items angegebene Ausrichtung überschrieben.

Die Eigenschaft align-self hat die gleichen Werte wie die Eigenschaft align-items. Sie sind unten für Ihre Bequemlichkeit aufgelistet.

• stretch (voreingestellt) - Die Items werden gedehnt, um den Container zu füllen.
• flex-start - Die Items werden bis zum Cross Start des Containers gestapelt.
• flex-end- Die Items werden bis zum Cross End des Containers gestapelt.
• center - Die Items werden in der Mitte der Querachse gestapelt.
• baseline - Die Items werden so ausgerichtet, wie ihre Grundlinien ausgerichtet sind.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
      display: flex;
      align-items: flex-start;
      width: 80%;
      height: 300px;
      padding: 5px;
      background: #1c87c9;
      }
      .main div {
      flex: 1;
      padding: 15px 0;
      background: lightgray;
      text-align: center;
      font-size: 28px;
      color: #666666;
      }
      .two {
      align-self: center;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div>1</div>
      <div class="two">2</div>
      <div>3</div>
    </div>
  </body>
</html>

Die Eigenschaft flex-grow

Die Eigenschaft flex-grow definiert die Fähigkeit eines Objekts, bei Bedarf zu wachsen. Sie stellt den Flex-Wachstumsfaktor (relativ zum Rest der Items innerhalb des Containers) ein, der den Platz angibt, den das Item im Container einnehmen soll, wenn es positiven Raum verteilt.

Die Eigenschaft nimmt einen einheitenlosen Wert an, welcher als Proportion dient.

Wenn alle Items im Container den gleichen Wert für Flex-Grow haben (z. B. 1), dann haben alle Items im Container die gleiche Größe.

Wenn die Größe eines der Flex-Items unterschiedlich ist (z. B. 2), dann nimmt dieses Item doppelt so viel Platz ein wie die Größe der anderen Item (deren Größe beträgt 1).

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
      display: flex;
      width: 90%;
      height: 150px;
      background: #c3c3c3;
      }
      .main div { width: 15%; height: 50px; }
      div.item-blue { flex-grow: 2; }
      div.item-yellow { flex-grow: 1; }
      div.item-red { flex-grow: 4; }
      div.item-green { flex-grow: 1; }
      /* Ändern Sie die Zahlen, um zu sehen, wie die Items wachsen */
    </style>
  </head>
  <body>
    <h1>Die Eigenschaft flex-grow</h1>
    <div class="main">
      <div style="background-color:#1c87c9;" class="item-blue"></div>
      <div style="background-color:yellow;" class="item-yellow"></div>
      <div style="background-color:red;" class="item-red"></div>
      <div style="background-color:#8ebf42;" class="item-green"></div>
    </div>
  </body>
</html>

Die Eigenschaft flex-shrink

Die Eigenschaft flex-shrink ist so eingestellt, dass ein Flex-Objekt schrumpfen kann. Sie gibt den Platz an, den das Element im Container einnehmen soll, wenn der negative Platz verteilt wird.

Die Eigenschaft nimmt einen einheitlichen Wert an.

Voreingestellt können alle Flex-Items verkleinert werden, aber wenn wir den Wert auf 0 setzen (nicht verkleinern), werden sie die Originalgröße beibehalten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
      display: flex;
      height: 150px;
      background: #c3c3c3;
      }
      .main div { width: 10%; height: 50px; }
      div.item-blue { flex-grow: 1; }
      div.item-yellow { flex-grow: 1; }
      div.item-red { flex-shrink: 3; }
      div.item-green { flex-grow: 1; }
      /* Ändern Sie die Zahlen, um zu sehen, wie die Items schrumpfen. */
    </style>
  </head>
  <body>
    <h1>The flex-grow property</h1>
    <div class="main">
      <div style="background-color:#1c87c9;" class="item-blue"></div>
      <div style="background-color:yellow;" class="item-yellow"></div>
      <div style="background-color:red;" class="item-red"></div>
      <div style="background-color:#8ebf42;" class="item-green"></div>
    </div>
  </body>
</html>

Die Eigenschaft flex-basis

Die Eigenschaft flex-basis stellt die Anfangsgröße eines Flex-Items ein, bevor der verbleibende Platz entsprechend den Flex-Faktoren verteilt wird. Die Eigenschaft wird durch das Schlüsselwort content oder width angegeben.

Die Werte von flex-basis sind folgende:

• auto (voreingestellt) - Die Länge entspricht der Länge des flexiblen Items.
• width - Eine absolute Länge oder ein Prozentsatz der Hauptgröße des übergeordneten Flex-Containers oder das Schlüsselwort auto. Negative Werte sind ungültig.
• content - Es bestimmt die automatische Größenanpassungaufgrund des Inhalts des Flex-Items.
• initial - Es stellt diese Eigenschaft auf ihren Standardwert ein.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
      display: flex;
      height: 100px;
      border: 1px solid #c3c3c3;
      }
      .main div { flex-grow: 0; flex-shrink: 0; flex-basis: 40px; }
      .main div:nth-of-type(2) { flex-basis: 80px; }
      .main div:nth-of-type(4) { flex-basis: 60px; }
    </style>
  </head>
  <body>
    <h1>Die Eigenschaft flex-basis</h1>
    <p>Stellen Sie die Anfangslänge der Flex-Items auf 40 Pixel, mit einer Ausnahme ein; stellen Sie die Anfangslänge des zweiten Flex-Items auf 100 Pixel ein:</p>
    <div class="main">
      <div style="background-color:red;">40px</div>
      <div style="background-color:#1c87c9;">80px</div>
      <div style="background-color:yellow;">40px</div>
      <div style="background-color:#8ebf42;">60px</div>
      <div style="background-color:lightgrey;">40px</div>
    </div>
  </body>
</html>

Die Eigenschaft flex

Die Eigenschaft flex ist die Kurzform für flex-grow, flex-shrink und flex-basis zusammen. Die Eigenschaften flex-shrink und flex-basis sind optional.

Mit anderen Werten kann diese Eigenschaft auto (1 1 auto) oder none (0 0 auto) akzeptieren.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
      display: flex;
      width: 280px;
      height: 300px;
      border: 1px solid black;
      }
      .main div {
      flex: 1;
      }
    </style>
  </head>
  <body>
    <h1>Die Eigenschaft flex </h1>
    <div class="main">
      <div style="background-color:red;">RED</div>
      <div style="background-color:#1c87c9;">BLUE</div>
      <div style="background-color:#8ebf42;">Green div mit mehr Content.</div>
    </div>
  </body>
</html>

Flexbox Beispiele

Lassen Sie einige Beispiele von CSS-Flexbox betrachten und sehen, welche Layouts Sie für Ihre eigenen Webprojekte verwenden können.

Zentrierung von Elementen vertikal und horizontal

Das Zentrieren von Elementen mit allen verfügbaren Mitteln in CSS war schon immer ein Problem. Mit dem Aufkommen von Flexbox ist dieses Problem leicht zu lösen. Mit den Eigenschaften align-items, align-self und justify-content können Sie Elemente sowohl vertikal als auch horizontal ausrichten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300px;
      border: 2px solid #666666;
      }  
      .flex-item {
      padding: 20px;
      margin: 5px;
      background: #8ebf42;
      color: white;
      font-weight: bold;
      font-size: 3em;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
      <div class="flex-item">4</div>
    </div>
  </body>
</html>

Responsive Navigation Bar with Search

Mit Flexbox können Sie eine Navigationsleiste mit linksbündigen Menüeinträgen und einer rechtsbündigen Suchleiste erstellen (oder umgekehrt). Die Navigationsleiste reagiert, sie expandiert oder kollabiert je nach Bildschirmgröße.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main-nav {
      display: flex;
      padding: 1em;
      border-radius: 5px;
      background: #1c87c9;
      color: white;
      }
      .main-nav > ul {
      display: flex;
      flex: 2;
      padding: 0;
      margin: 0;
      list-style-type: none;
      }
      .main-nav li { margin-right: 1em; }
      .main-nav > form {
      display: flex;
      justify-content: flex-end;
      flex: 1;
      }
      .main-nav input { flex: 1; }
      .main-nav button {
      padding: 0 1em;
      margin-left: .3em;
      border: 0;
      border-radius: 1em;
      background: white;
      color: #666666;
      }
      @media screen and (max-width: 575px) {
      .main-nav { flex-direction: column; }
      .main-nav ul { margin-bottom: 1em; }
      }
    </style>
  <body>
    <nav class="main-nav">
      <ul>
        <li>Home</li>
        <li>About us</li>
        <li>Services</li>
        <li>Contact us</li>
      </ul>
      <form>
        <input type="search" placeholder="Search">
        <button>Go</button>
      </form>
    </nav>
  </body>
</html>

Holy Grail Layout

Das Layoutmuster des Heiligen Grals ist im Web sehr beliebt. Es enthält Kopf- und Fußzeile, einen Hauptinhaltsbereich mit Navigation mit fester Breite auf der linken Seite, Inhalt in der Mitte und eine Seitenleiste mit fester Breite auf der rechten Seite.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
      box-sizing: border-box;
      font-size: 18px;
      }
      body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      margin: 0;
      }
      .main { display: flex;  flex: 1; }
      .main > article { flex: 1; }
      .main > nav, .main > aside { flex: 0 0 20vw; background: #d5dce8; }
      .main > nav { order: -1; }
      header, footer { background: #1c87c9; height: 15vh; }
      header, footer, article, nav, aside { padding: 1em; }
    </style>
  <body>
    <header>Header</header>
    <div class="main">
      <article>Article</article>
      <nav>Nav</nav>
      <aside>Aside</aside>
    </div>
    <footer>Footer</footer>
  </body>
</html>