Die Kurzschreibweise flex bestimmt die flexiblen Ausmaße von Flexboxen und ist eine verkürzte Schreibweise für drei Angaben. Soweit so klar. Was aber weniger bekannt ist: Wenn man bei flex die Angabe für flew-grow oder flex-basis weglässt, werden andere Werte genommen als die Ausgangswerte der beiden Eigenschaften. Das ist ungewöhnlich. Aber noch mal ganz von vorne.
Flexbox: Elemente intelligent ausblenden mit visibility: collapse
Bei Flexbox passen sich die Elemente aneinander an – aber was ist, wenn Elemente temporär ausgeblendet werden … und die umgebenden Elemente sich trotzdem daran anpassen sollen? In diesem Fall hilft visibility: collapse.
Flexbox: Zentrieren per margin und per justify-content/align-items
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.
Funktionsweise von display: inline-flex
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.
Google Fonts: neue Oberfläche nutzen
An verschiedenen Stellen – beispielsweise im „Website Kompendium“ – beschreibe ich, wie man individuelle Schriften dank Google Fonts verwendet. Die klassische Oberfläche, die ich zeige, erreicht man auch weiterhin unter https://www.google.com/fonts/, die neue befindet sich bei https://fonts.google.com/. Hier zeige ich kurz, wie man die neue Oberfläche einsetzt.
Reihenfolge von Elementen mit transform umkehren
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.
Aber zuerst zu anderen Möglichkeiten:
- Flexbox erlaubt die Anpassung der Reihenfolge natürlich von Haus aus. Dafür kann man die Eigenschaft order nutzen und damit die Elemente in beliebiger Reihenfolge anzeigen lassen.
- Für Gridlayout ist das ein Kinderspiel (da kann man die Reihenfolge der Elemente im Raster genauestens festlegen – ein Beispiel für eine Umsetzung eines Layouts mit Gridlayout zeige ich bei den Webkrauts).
- Erstaunlicherweise kann man dafür auf
display: table& Konsorten zurückgreifen.
Und auch transform kann man zur Umkehrung der Reihenfolge nutzen. Und zwar so:
shrink-to-fit=no Ergänzung bei der viewport-Meta-Angabe
Bei einer Schulung zum Thema Responsive Webdesign bin ich über die folgende Viewport-Angabe gestolpert:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Neu war mir der Zusatz shrink-to-fit=no
CSS-Tipp am Mittwoch
Ab jetzt gibts jeden Mittwoch einen Tipp per Video für die effektive Arbeit mit CSS. Den Anfang macht am Mittwoch, 24.2.2016 ein Tipp zur richtigen Verwendung von Webfonts.
https://www.video2brain.com/de/videotraining/tipp-am-mittwoch-effektives-webdesign-mit-css
Mindestaußenabstand – min-margin faken
Die Eigenschaft min-margin gibt’s nicht, aber ein Mindestaußenabstand lässt sich mit calc() faken. Bevor ich dazu komme, aber kurz zur Funktionsweise von max-width. Da gibt es nämlich ein interessantes Verhalten bei untypischen Angaben.
Weiterlesen
PHP lernen – das neue Grundlagenvideotraining
PHP ist und bleibt die beliebteste serverseitige Skriptsprache im Web. Ob für kleine Anwendungen wie zur Verarbeitung von Formulardaten oder für große Anwendungen wie Content Management Systeme – überall kommt PHP zum Einsatz. Und für den Einstieg in PHP gibts jetzt mein neues Grundlagentraining bei video2brain – aktuell bis PHP 7.
Was alles im Training vorkommt, verrate ich im Trailer.
Weiterlesen