Antwort an „Bimmelbeule“ verfassen

Hallo!

Ich beschäftige mich gerade mit einem dreispaltigen Layout mit Flexbox…

Das CSS und die Testseite funktionieren einwandfrei. Bei 50em bricht sowohl die Navigation als auch die aside um. Soweit, sogut.

Ich möchte aber jetzt, noch ein zusätzliches Media Querie bei 65em einfügen, wo nur die aside zwischen dem Haupttext (main) und dem Footer rutscht, die Navigation aber erst mal auf der linken Seite bleibt, bis sie bei 50em ebenfalls umbricht (und dann zwischen aside und Footer steht). Ich blicke das nicht! Kann mir bitte freundlicherweise jemand vom Schlauch helfen?

Das CSS sieht so aus:

body {
  max-width: 80em;
  margin: 0 auto;}

.container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 50em) {
  .container {
    flex-direction: row;
    flex: 1;
  }
  main {
    flex: 1;
  }
  nav {
    order: -1;
}
  nav, aside {
    flex: 0 0 5em;
  }
}

Die Testdatei ist hier: Testseite

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen