Wie funktioniert flex-grow?

Nachdem der Support für Flexbox mittlerweile schon mehr als brauchbar ist, habe ich vor einigen Wochen beschlossen, dass es endlich Zeit für mich ist, mich mit Flexbox zu beschäftigen und es in meinen Projekten zu verwenden.
Ich war sehr schnell sehr begeistert, weil Flexbox tatsächlich so abgefahren ist, wie alle sagen. Dementsprechend habe ich keine Gelegenheit ausgelassen und immer wieder von meinen neuesten Erkenntnissen erzählt. So war es auch wie ich meinem Kollegen Rob von der Eigenschaft flex-grow vorgeschwärmt habe. Ich habe ihm gezeigt wie sie funktioniert und auch eine einfache Demo erstellt.
Er war ähnlich begeistert und wollte flex-grow gleich auf einer Website testen, die er kürzlich gemacht hat. Also haben wir die Website geöffnet, DevTools gestartet, alle Floatings entfernt und display: flex und flex-grow angewendet. Dabei sind wir natürlich auch sichergegangen, dass keines der Elemente negative margins hatte oder eine position, die uns stören konnte. Trotzdem war das Layout kaputt. Egal was wir versucht haben, das Layout hat nicht ausgesehen und funktioniert wie in meiner Demo, obwohl wir die exakt gleichen Eigenschaften verwendet haben.

flex-grow: Funktionsweise und Anwendungsbeispiele

Wie sich herausgestellt hat, habe ich ganz einfach falsch verstanden wie flex-grow funktioniert. Deswegen habe ich mich in weiterer Folge intensiv mit der Eigenschaft auseinandergesetzt. Zufälligerweise bin ich zu dieser Zeit mit Chris Coyier von CSS-Tricks in Kontakt gekommen und somit konnte ich meine Erkenntnisse und einige praktische Beispiele in einem Artikel auf css-tricks.com zusammenfassen. Wenn also Interesse daran besteht genauer herauszufinden was genau hinter flex-grow steckt, dann kann ich diesen Artikel nur wärmstens empfehlen.
An dieser Stelle möchte ich ein großes Dankeschön an Eva Lettner fürs Lektorat richten.

Mehr lesen

Elemente mit CSS vertikal zentrieren

Ich melde mich aus der Sommerpause mit einem kleinen Tipp und einer Bitte zurück. Ich musste gestern ein Bild innerhalb eines div mit fixer Höhe vertikal zentrieren. Mein erster Gedanke war irgendeine Lösung mit position: relative und absolute. Ich wollte aber noch checken, ob es andere, bessere Lösungen gibt. Dann ist mir aber eingefallen, dass ich gar nicht erst suchen muss, weil ich die beste Lösung schon kenne, Flexbox.

HTML

<div>
    <img src="dasbild.jpg" />
</div>

CSS

div {
    width: 200px;
    height: 200px;

    display: flex;
    align-items: center;
}

Man macht das Elternelement zu einem Flexbox-Element und zentriert das Kindelement mit align-items: center;. Fertig. Ein Beispiel, inklusive 3 weiterer Techniken ohne Flexbox, habe ich auf codepen gestellt.

Und damit komme ich auch schon zu meiner Bitte: Fangt an mit Flexbox zu arbeiten. Die Browserunterstützung ist super und es gibt viele Lern- und Nachschlageressourcen, wie beispielsweise der css-tricks.com Artikel oder flexboxin5.com.

Mehr lesen

Hintergrundbilder mit Pixel- oder Prozentwerten relativ zu egal welcher Kante positionieren

Background-position 3-4 Werte Syntax

Positioniert man ein Hintergrundbild mit Pixel- oder Prozentwerten, wird die linke obere Ecke des jeweiligen Elements als Referenzpunkt verwendet. Gibt man dem Element beispielsweise background-position: 20px 40px, bewegt sich das Bild um 20px nach rechts und 40px nach unten, ausgehend von der oberen bzw. linken Kante des Elements. Mit CSS2.1 konnte man nur relativ zu eben diesen Kanten positionieren und nicht beispielweise 40px von rechts und 20px von unten.

Mit CSS3 ist das aber schon seit einer ganzen Weile möglich. Dafür gibt es eine 3 bzw. 4 Werte Syntax. Man gibt zuerst die Seite an von der man ausgehen möchte und dann den Pixel- oder Prozentwert um den das Bild verschoben werden soll.

background-position: right 40px bottom 20px;

Lässt man den zweiten Wert weg, ist dieser standardmäßig auf 0.

background-position: right 40px bottom;

Alle aktuellen Browser beherrschen diese Schreibweise und viele schon seit mehreren Versionen. In Internet Explorer kann man diese Technik ab Version 9 anwenden. Ein Live-Beispiel gibt es in diesem Codepen zu sehen.

Mehr lesen

Gleich hohe Spalten mit CSS

Gleich hohe Spalten in CSS

Die Arbeit mit Prozentangaben für die height-Eigenschaft in CSS kann relativ frustrierend sein. Wenn man Layouts baut, aber auch schon, wenn man nur versucht mehrere, gleich hohe Spalten zu erzeugen. Für das Erstellen von Spalten gibt es verschiedene Techniken, u.a. viel padding + negativer margin, divs endlos schachteln, wiederholende Hintergrundbilder, absolute Positionierung, etc. Ich habe mir zwei Techniken angesehen, die nicht zu kompliziert sind und keine Bilder und zusätzliches Markup verlangen.

(mehr …)

Mehr lesen