Flexbox Layout funktioniert auf Windows Phone nicht

[marctrix]

Hej Caroline,

habe die Erklärung vergessen

main {
  display: flex;
  flex-wrap: wrap;
}

Der Hauptbereich wird zum Flexbox-Container, den enthaltenen Boxen (Flex-items) wird erlaubt, bei Platzmange untereinander zu stehen.

nav,
.aside {
  flex-basis: 20em;
  flex-grow: 1;
}

Die Randspalten für Navi und weiterführende Infos bekommen eine Ausgangsbreite zugewiesen. Wenn der Platz nicht reicht, werden diese umbrechen. Sie wachsen im Verhältnis 1:1

.content {
  order: -1;             /* war im letzten Posting nicht drin, muss aber an diese Stelle! */
  flex-basis: 40em;
  flex-grow: 2;
}

Der Inhalt wird auf kleinen Bildschirmen zuerst angezeigt, danach erst Navi und Randspalte (Navi könnte man auch ganz an das Ende setzen mit nav {order:1;}).

Der Content-Bereich für ein bis unendlich viele Artikel soll doppelt so groß sein, wie die beiden Randspalten. Darum erhält er eine Ausgangsgröße von 40em und er wächst im Vergleich zu den Randspalten im Verhältnis 2:1 wenn genügend Platz zum wachsen vorhanden ist (sonst wird umgebrochen).

@media screen and (min-width: 40em) {
    .content {
      order: 0;   /* War im letzten Posting leider falsch ... :-( */
    }
}

Auf größeren Bildschirmen soll der Inhaltsbereich zwischen den beiden Randspalten stehen. Mit den einzelnen Angaben für min-width und den Spaltenbreiten musst du etwas herumexperimentieren, bis sie dir gefallen... ;-)

Marc