Hej Caroline, habe die Erklärung vergessen > ~~~css > main { > display: flex; > flex-wrap: wrap; > } > ~~~ Der Hauptbereich wird zum Flexbox-Container, den enthaltenen Boxen (Flex-items) wird erlaubt, bei Platzmange untereinander zu stehen. > ~~~css > 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 > ~~~css > .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). > ~~~css > @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

Hej Caroline, habe die Erklärung vergessen > ~~~css > main { > display: flex; > flex-wrap: wrap; > } > ~~~ Der Hauptbereich wird zum Flexbox-Container, den enthaltenen Boxen (Flex-items) wird erlaubt, bei Platzmange untereinander zu stehen. > ~~~css > 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 > ~~~css > .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. > ~~~css > @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

Hej Caroline, habe die Erklärung vergessen > ~~~css > main { > display: flex; > flex-wrap: wrap; > } > ~~~ Der Hauptbereich wird zum Flexbox-Container, den enthaltenen Boxen (Flex-items) wird erlaubt, bei Platzmange untereinander zu stehen. > ~~~css > 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 > ~~~css > .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 1:2 wenn genügend Platz zum wachsen vorhanden ist. > ~~~css > @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

Hej Caroline, habe die Erklärung vergessen > ~~~css > main { > display: flex; > flex-wrap: wrap; > } > ~~~ Der Hauptbereich wird zum Flexbox-Container, den enthaltenen Boxen (Flex-items) wird erlaubt, untereinander zu stehen. > ~~~css > 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 > ~~~css > .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 1:2 wenn genügend Platz zum wachsen vorhanden ist. > ~~~css > @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

Hej Caroline, habe die Erklärung vergessen > ~~~css > main { > display: flex; > flex-wrap: wrap; > } > ~~~ Der Hauptbereich wird zum Flexbox-Container, den enthaltenen Boxen (Flex-items) wird erlaubt, untereinander zu stehen. > ~~~css > 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 > ~~~css > .content { > order: -1; > 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 1:2 wenn genügend Platz zum wachsen vorhanden ist. > @media screen and (min-width: 40em) { > .content { > order: 0; > } > } > ~~~ 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