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.

Flexbox: display:flex erzeugt einen Flex-Container und Flex-Items

Flexbox: display:flex erzeugt einen Flex-Container und Flex-Items

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

Gratismonat starten Für Ihr Team erwerben

Flexbox: display:flex erzeugt einen Flex-Container und Flex-Items

“

Flexbox heißt mit vollem Namen das "CSS Flexible Box Layout Module" und es erleichtert definitiv die flexible Gestaltung von HTML Elementen. Der Kern der Sache, der erste Schritt auf dem Weg zum Gestalten per Flexbox ist immer display: flex. Diese Deklaration macht das betreffende Element zu einem Flex-Container. Das ist ein ganz wichtiger Begriff. Flex-Container ist das äußere Element, und in diesem Container gibt es einen Flex Formatting Context und die entsprechenden Kind-Elemente, die nennt man Flex-Items. Also Flex-Container außen drum rum, und dadurch werden automatisch alle Kindelemente zu Flex-Items. Für diese Flex-Items gelten besondere Regeln, da gibt es neue Eigenschaften, da gibt es neue Werte, so dass man diese Kindelemente automatisch flexibel layouten kann. Flexbox basiert auf einer intakten Eltern-Kind-Beziehung, und deswegen sind z.B. Listen ideal geeignet, weil mit ul oder ol und den li Listenelementen darin ist diese Eltern-Kind-Beziehung eigentlich schon…

Inhalt