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.

Weiterlesen

Reihenfolge von Elementen mit transform umkehren

Umgekehrte Reihenfolge

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:

Weiterlesen

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

Weiterlesen

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 GrundlagenPHP 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

PHP 7: schneller ist besser

PHP 7 punktet mit einer deutlich besseren Geschwindigkeit. Ohne dass man etwas tun müssen, werden beim Einsatz von PHP 7 die Seiten schneller erzeugt. Details dazu zeige ich im Video.

Weiterlesen

PHP 7 – die Neuerungen

Videotraining: Neu in PHP 7Endlich mal wieder ein großer Versionswechsel bei PHP. Und PHP 7 hat einiges an attraktiven Neuerungen zu bieten … von neuen Operatoren wie dem Raumschiff- und den Null Coalesce-Operator, über skalare Typdeklarationen, anonyme Klassen und mehr.

In meinem halbstündigen Training bei video2brain zeige ich alle wichtigen Neuerungen.
Weiterlesen

Responsive Layouten mit Flexbox und mit Gridlayout – der Vergleich

Wer CSS3-Layouts sagt, meint meist Flexbox. Speziell zur Erstellung von Layouts ist aber eigentlich vom W3C das CSS Grid Layout Module vorgesehen. Was der Vorteil des neuen Gridlayout-Moduls ist, zeige ich meinem Beitrag zum Adventskalender der Webkrauts: Ihr erfahrt zuerst das Grundprinzip des Gridlayoutmoduls. Dann geht es um einen konkreten Vergleich von Flexbox und Gridlayout: Ihr seht, wie ihr mit beiden Layouttechniken ein HolyGraillayout umsetzen könnt und wie sich die beiden Techniken in ihrer Herangehensweise unterscheiden … zum Artikel Gridlayout vs Flexbox