Flexbox Patterns The Ultimate CSS Flexbox Code Library

Najnowsza właściwość flexbox CSS radykalnie zmieniła sposób tworzenia interfejsów przez programistów. Koniec z pływakami i hackami CSS, aby idealnie dopasować układy. Koniec z martwieniem się o niestandardowe techniki obsługi układów wielokolumnowych.

Ale mimo że flexbox rozwiązuje wiele problemów, nauka jest skomplikowana. Aby pomóc Ci zacząć, dostępna jest nowa biblioteka online o nazwie Flexbox Patterns, która kataloguje wiele różnych elementów flexbox w jednym centralnym miejscu.

Ta biblioteka jest całkowicie darmowa i jest otwarta na GitHub. Wszystkie przykłady mogą być pobrane lokalnie przez NPM lub przez GitHub. Ale możesz również przeglądać przykłady na stronie internetowej, aby kopiować i wklejać kody w razie potrzeby.

Każdy wzór ma swoją własną stronę z krótkim opisem i przykładami kodu. Możesz dosłownie skopiuj i wklej kody do istniejącego projektu internetowego, chociaż zaleca się, aby najpierw dowiedzieć się trochę o tym, co robi kod i dlaczego go używasz.

Weźmy na przykład prezentację paska nagłówka witryny za pomocą Flexbox, aby wyrównać wszystkie elementy w górnym pasku nawigacyjnym obok siebie.

Zazwyczaj wymagałoby to floatów i klasy clearfix, aby wszystko było poprawnie wyrównane.

Dzięki Flexbox możesz przechowywać wszystko w jednym pojemniku za pomocą wyświetlacz: flex własność. W ten sposób możesz zdefiniuj sposób interakcji elementów ze sobą i jak flexbox powinien działać na mniejszych ekranach.

Wzorce są stale aktualizowane, a bieżąca biblioteka skupia się na najbardziej typowych elementach, takich jak karty, paski boczne i centrowanie pionowe / poziome.

Jeśli jesteś nowy w Flexboxie, zdecydowanie sprawdź wzory Flexbox. Witryna nie nauczy Cię wszystkich podstaw flexboxa, ale będzie oferować przykłady z prawdziwego świata, które możesz wykorzystać do własnych projektów internetowych.