Bei der Verwendung von Flexbox gibt es bekanntlicherweise zwei Arten, Elemente zu zentrieren. Man kann `margin` beim zu zentrierenden Element einsetzen oder mit `justify-content/align-items` hantieren.
Bisher dachte ich, dass beide sich nur in der Browserunterstützung unterscheiden, aber es gibt einen anderen wesentlichen Unterschied zwischen beiden - der sich zeigt, wenn der Viewport kleiner ist als das zu zentrierende Element.
Zur Aktivierung der Flexbox-Darstellung nimmt man `display: flex` oder `display: inline-flex`. Was von beiden man wählt, hat keine Auswirkung auf die Darstellung des Flexitems, sondern darauf, wie sich der Flexcontainer zu den umgebenden Elementen verhält. Mit `display: flex` verhält sich der Flexcontainer im Wesentlichen wie ein Blockelement, hingegen mit `display:inline-flex` eher wie ein Inline-Element.
Manchmal möchte man die Reihenfolge bei der Anzeige von Elementen abändern. Dafür gibt es mehrere Möglichkeiten – und ganz raffiniert fand ich, dass man dafür auch `transform` nutzen kann.
transform ist praktisch, wenn man die Reihenfolge der Elemente exakt umkehren möchte, so dass das Element, das im Quellcode zuletzt steht, am Anfang angezeigt wird etc.
Modernizr ist unschlagbar, wenn du alternative Formatierungen für Browser durchführen möchtest, die ein bestimmtes neues HTML5/CSS3-Feature nicht verstehen. Die neue Version von Modernizr sieht auf den ersten Blick ganz anders aus als die gewohnte. Die Benutzung ist aber auch nicht komplizierter.
Mit dem CSS-Layoutmodul Flexbox lassen sich Elemente einfach zentrieren.
Allerdings gibt es dafür unterschiedliche Ansätze: Entweder man verwendet zur Zentrierung die Eigenschaften align-items:center und justify-content: center oder aber man setzt dafür auf die altbekannte Eigenschaft margin.
