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.

Mehrspaltige Layouts per Flexbox: Neue Möglichkeiten ohne alte Probleme

Mehrspaltige Layouts per Flexbox: Neue Möglichkeiten ohne alte Probleme

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

Gratismonat starten Für Ihr Team erwerben

Mehrspaltige Layouts per Flexbox: Neue Möglichkeiten ohne alte Probleme

“

Flexbox wurde explizit zum Erstellen von Layouts geschaffen, und das merkt man von Anfang an. Sie sehen hier ohne flex und jetzt mit flex die Listenelemente, die Flex-Items, die Kindelemente des Flex Containers, stehen automatisch nebeneinander. Das ist aber nicht der einzige Vorteil, der hier auftaucht. Es ist also erstens, dass der Flex-Container alle Flex-Items umschließt, nicht wie beim Floaten, wo etwas nach unten herausragt. Die Flex-Items stehen nebeneinander, wie gesagt, und sie sind automatisch alle gleich hoch. Das Ganze erreicht man ohne "float", ohne "position" und ohne "width". Und auch beim Gestalten sollte man gleich versuchen, so wenig wie möglich min-width oder max-width zu gebrauchen, denn Flexbox funktioniert nach dem Motto: "Lassen Sie den Browser rechnen. Der kann das richtig gut." Es gibt jede Menge neue Eigenschaften, und diese neuen Eigenschaften, die innerhalb einer Flexbox zum Gestalten der Flex-Items benutzt werden, die kann man in 4 Kategorien einteilen…

Inhalt