Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Erhalten Sie Zugriff auf diesen Kurs – mit einer kostenlosen Probeversion

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 25.300 Kurse von Branchenfachleuten.

Die wichtigsten Flexbox-Eigenschaften auf einen Blick

Die wichtigsten Flexbox-Eigenschaften auf einen Blick

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Die wichtigsten Flexbox-Eigenschaften auf einen Blick

“

Ich möchte Ihnen jetzt die wichtigsten Flexbox-Eigenschaften im Überblick zeigen und ein bisschen sortieren. Die 4 Kategorien Fließrichtung, Ausrichtung, Flexibilität und Reihenfolge kennen Sie bereits, los geht's ganz links mit der Fließrichtung. Da gibt es 3 Eigenschaften: flex-direction, flex-wrap und zusammengefasst in der Kurzschreibweise flex-flow. Zur Ausrichtung gibt es justify-content und align-items, und ich habe hier gap noch aufgenommen für die Zwischenräume, das ist ein relativer new Kammer, wie erwähnt, aber ausgesprochen praktisch. Flex-Items kann man einzeln positionieren, mit der Eigenschaft align-self. Auch das gehört zur Ausrichtung. Es gibt noch eine Eigenschaft align-content, die ist aber nur relevant in mehrzeiligen Flexboxen, und die wird auch nicht so wirklich häufig benutzt. Zur Flexibilität von Flex-Items gibt es flex-grow, flex-shrink und flex-basis, zusammengefasst in der Kurzschreibweise flex. Und last but not least kann man die Reihenfolge von Flex-Items…

Inhalt