Flexbox-Muster Die ultimative CSS-Flexbox-Codebibliothek
Die neueste CSS-Flexbox-Eigenschaft hat die Art und Weise, wie Entwickler Schnittstellen erstellen, grundlegend geändert. Keine Floats und CSS-Hacks mehr, um das Layout perfekt auszurichten. Machen Sie sich keine Sorgen mehr über angepasste Reaktionstechniken für die Handhabung von mehrspaltigen Layouts.
Auch wenn Flexbox viele Probleme löst, ist es auch kompliziert zu lernen. Um Ihnen den Einstieg zu erleichtern, gibt es eine neue Online-Bibliothek namens Flexbox Patterns, in der viele verschiedene Flexbox-Elemente an einem zentralen Ort katalogisiert werden.
Diese Bibliothek kann kostenlos genutzt werden und ist auf GitHub verfügbar. Alle Beispiele können sein lokal über NPM heruntergeladen oder durch GitHub. Sie können die Beispiele jedoch auch durch die Website durchsuchen, um Codes nach Bedarf zu kopieren und einzufügen.
Jedes Muster hat eine eigene Seite mit einer kurzen Beschreibung und Codebeispielen. Das kann man buchstäblich Kopieren Sie die Codes und fügen Sie sie in Ihr vorhandenes Webprojekt ein, Es wird jedoch empfohlen, dass Sie zuerst ein wenig darüber lernen, was der Code macht und warum Sie ihn verwenden.
Nehmen Sie zum Beispiel die Site Header Bar Demo mit Flexbox, um alle Elemente in einer oberen Navigationsleiste nebeneinander auszurichten.
Normalerweise erfordert dies Floats und eine Clearfix-Klasse, um alles richtig auszurichten.
Mit der flexbox können Sie alles mit der Anzeige: Flex Eigentum. Auf diese Weise kannst du Definieren Sie, wie die Elemente interagieren sollen miteinander und wie die flexbox sollte auf kleineren Bildschirmen arbeiten.
Die Muster werden ständig aktualisiert, und die aktuelle Bibliothek konzentriert sich auf die am häufigsten verwendeten Elemente wie Registerkarten, Seitenleisten und vertikale / horizontale Zentrierung.
Wenn Sie Flexbox noch nicht kennen, sollten Sie unbedingt die Flexbox Patterns ausprobieren. Auf der Website werden Ihnen nicht alle Grundlagen von Flexbox vermittelt, sondern Beispiele aus der Praxis, die Sie für Ihre eigenen Webprojekte basteln können.
