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

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 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