Code

So verwenden Sie die Flexbox-Layoutmethode (Teil 1)

Mit jeder neuen Überarbeitung von CSS kommt eine Fülle neuer, spannender Attribute ans Licht; Eines davon ist das Understatement: Flex-Ansatz.

Das Flexbox-Layout-Modell schwebt nun seit einiger Zeit im Web, jedes Mal mit einer eigenen Variante des Ansatzes (einige veraltet, wie das Display: Box oder Display: Flexbox-Methode).

Im heutigen Leitfaden werden wir die Vorteile der Flexbox-Technik in unseren eigenen Layouts entdecken.

Zu den großartigen Funktionen des neuen Modells gehören:

  • Einfache Verhältnisbasierte Größenanpassung; Sie müssen Ihren HTML-Code nicht berühren
  • Reorder mit einem Kinderspiel durch die Verwendung von Ganzzahlen innerhalb des Stylesheet
  • Gilt für alle untergeordneten Elemente innerhalb eines korrekt definierten übergeordneten Elements
  • Keine weiteren Clearfixes!

Im Teil 2 Wir werden einen Blick darauf werfen, wie wir das noch weiter bringen können, und Ihr Flexbox-Layout in ein vollwertiges responsives Design verwandeln!

Haben Sie den Flexbox-Ansatz für das Layout verwendet? Bevorzugen Sie eine andere Methode? Lassen Sie es uns in den Kommentaren wissen.

Ausgewähltes Bild / Vorschaubild, flexibles Bild über Shutterstock.

Flexbox Responsive Layouts erstellen flex box wie Layout-Modell für HTML 5 ansprechende Layouts