Grids nested in Flexbox --- Eine simple Anfängerfrage

[Matthias Apsel]

Hallo einsiedler,

@media all {
		header, nav, main, aside, footer, article, figure, figcaption, audio, video {
			display: block;
		}
		*, *:before, *:after {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		
    /* alle weiteren Deklarationen */
}		

Einige Hinweise zu deinem CSS unabhängig von deiner Frage.

• Es ist nicht notwendig, das gesamte CSS von einer Medienabfrage abhängig zu machen, die sowieso für alle Medien gelten soll. Das ist ungefähr so, als sagtest du: „Kauf mir bitte ein Eis, aber nur wenn heute ein Tag ist“

• Das Vorstellen der unbekannten Elemente machst du hauptsächlich für IE < 8, aber da der keine Mediaqueries kennt, ist es nicht unwahrscheinlich, dass der überhaupt keine CSS-Regel zu Gesicht bekommt.

• Browser, die box-sizing mit Präfix brauchen, sind ausgestorben.

• Pseudoelemente werden mit zwei Doppelpunkten gekennzeichnet, *::after ist dasselbe wie ::after

• Es ist nicht sinnvoll, zu versuchen die Seite in allen Browsern gleich aussehen zu lassen. Ebenso ist es vertane Zeit für IE8 ein Grid nachbauen zu wollen.

Dein CSS wird also

*, ::before, ::after {
  box-sizing: border-box;
}

besser noch

html { 
  box-sizing: border-box; 
}
*, ::before, ::after { 
  box-sizing: inherit; 
}

falls du verschiedene Werte für border-box verwenden möchtest. Unter Berücksichtigung der IE < 13 könnte auch

html { 
  box-sizing: border-box; 
}
*, ::before, ::after { 
  box-sizing: border-box;
  box-sizing: inherit; 
}

sinnvoll sein, da diese inherit nicht kennen.

---

Interessehalber: Warum musst du an allen möglichen und unmöglichen Stellen einen Zeilenumbruch setzen?

Bis demnächst
Matthias