W artykule:
O stary, pamiętasz, jak trudno było wyśrodkować zawartość w pionie na twojej stronie? Jeśli zmagasz się ze słowami „used to be” W tym ostatnim zdaniu, najwyraźniej jeszcze nie trafiłeś na flexbox.
CSS nie został pierwotnie zaprojektowany do obsługi skomplikowanej stylizacji szablonów, którą widzimy w dzisiejszych czasach w Internecie, zmuszając programistów do wymyślania hacków CSS, aby treść wyglądała dobrze.
Flexbox, lub flexible boxes, to stosunkowo nowy moduł układu w CSS3 zaprojektowany w celu poprawy wyrównania, kierunku i kolejności elementów w kontenerze, nawet jeśli jest dynamiczny lub o nieznanym rozmiarze. Jego najważniejszą cechą jest możliwość modyfikowania szerokości lub wysokości swoich dzieci, aby jak najlepiej wypełnić dostępną przestrzeń na różnych rozmiarach ekranu.
W tym poście przedstawię Ci, jak działa flexbox i jak dodać go do arkusza stylów WordPress, aby Twoja strona była na bieżąco z najnowszymi standardami CSS.
Co To jest Flexbox?
Flexbox jest jednym z pierwszych modułów zaprojektowanych do rzeczywistego layoutu i sprawia, że stylizacja z CSS jest łatwiejsza, a w niektórych przypadkach wręcz możliwa.
Moduł zaprojektowany w celu ulepszenia modelu pudełkowego CSS, umożliwiając elastyczność kontenerów i ich zawartości. Za pomocą flexbox pojemnik i jego dzieci można ustawiać w dowolnym kierunku: w lewo, w prawo, a nawet w górę lub w dół. Możesz wybrać kolejność elementów na stronie i zmienić ich kolejność, wyrównać zawartość od prawej do lewej za pomocą jednej właściwości, a nawet dodać dowolną liczbę kolumn do strony. Rozmiar jest również elastyczny, ponieważ elementy mogą rosnąć, aby zająć niewykorzystaną przestrzeń lub kurczyć się, aby zapobiec przepełnieniu.
Fajne jest to, że chociaż flexbox nie jest jeszcze oficjalnie częścią CSS3, wszystkie główne przeglądarki obsługują go, w tym Android i iOS.
Kiedy używać Flexbox do układu
Ostatnio pisałem o grid layoutach, podobnym ulepszeniu do CSS również zaprojektowanym dla lepszych layoutów. Istnieje subtelna różnica między tymi dwoma, co sprawia, że jeden nadaje się do tworzenia kompletnych układów, a drugi nie tak bardzo.
Chociaż flexbox jest technicznie zdolny do tworzenia pełnego układu dla Twojego motywu, nie jest przeznaczony wyłącznie do tego celu. Raczej lepiej nadaje się do stylizacji oddzielnych kontenerów, takich jak główny obszar zawartości, pasek boczny, nagłówek i inne podobne sekcje. Siatki idealnie nadają się do tworzenia całego układu.
Różnica polega na tym, że flexbox z natury współdziała z głównymi przeglądarkami, które ładują się stopniowo. Zawartość, która pojawia się najpierw, jest rozciągana poziomo, aby dopasować się do całego ekranu. W miarę ładowania się większej liczby kontenerów wyświetlacz poziomy o pełnej szerokości dostosowuje się i kurczy, aby uwzględnić otaczające go Elementy.
Jak zauważa Jake Archibald, zwolennik Chrome w swoim artykule nie używaj Flexbox do ogólnego układu strony, to, co użytkownik końcowy widzi, to nagły skok układu z treści pojawiającej się jako pełna szerokość do rzeczywistego rozmiaru, który może być znacznie mniejszy. Chociaż jest to problem tylko dla użytkowników z wolniejszymi połączeniami internetowymi, nadal stanowi problem dla doświadczenia użytkownika. Mając to na uwadze, nie musisz wybierać między dwoma siatkami dla układów i flexbox dla zawartości w tym układzie.
Pojemniki, dzieci i Flex
Zanim zaczniesz kodować swój pierwszy flexbox, musisz najpierw zrozumieć kilka ważnych pojęć. Zgodnie z najnowszym projektem roboczym CSS W3C:
- flexbox – Pojemnik staje się flexbox po dołączeniu
wyświetlaczwłaściwość i ustawić ją naflexlubinline-flex - flex pozycja – Element potomny w flexboxie
- główna oś / główny wymiar – Główna oś kontenera flex jest główną osią, wzdłuż której ułożone są elementy flex. Rozciąga się w głównym wymiarze
- oś krzyżowa / wymiar krzyżowy – Oś prostopadła do osi głównej nazywana jest osią poprzeczną. Rozciąga się w wymiarze krzyżowym
- główna-start / main-end – Elementy flex są umieszczane w pojemniku, zaczynając od strony głównego startu i przechodząc w stronę głównego końca
- cross-start / cross-end – Linie Flex są wypełnione elementami i umieszczane w pojemniku, zaczynając od strony cross-start pojemnika flex i przechodząc w stronę cross-end
- Główny rozmiar / główna właściwość rozmiaru – Szerokość lub Wysokość elementu flex, w zależności od tego, który z nich znajduje się w głównym wymiarze, jest głównym rozmiarem elementu. Główną właściwością rozmiaru elementu flex jest właściwość width lub height, w zależności od tego, która z tych właściwości znajduje się w głównym wymiarze.
- cross size / cross size property – Szerokość lub Wysokość elementu flex, w zależności od tego, która z tych wartości ma wymiar krzyżowy, jest rozmiarem krzyżowym elementu. Właściwość cross size jest zależna od szerokości lub wysokości, które znajdują się w wymiarze cross.
Istnieją również pewne właściwości w CSS, które nie mają wpływu na flexboxy, ponieważ w rzeczywistości nie są kontenerami bloków:
kolumna-*floatWyczyśćvertical-align:: pierwsza liniaoraz:: pierwsza literapseudo elementy
Budowanie kontenera z HTML5
Po tym wszystkim możesz zacząć budować swój flexbox. Aby to zrobić, najpierw musisz dodać trochę HTML5 do wybranej strony WordPress, niezależnie od tego, czy jest to nagłówek.php, archiwum.php, strona.php lub jakikolwiek plik zostanie wyświetlony przez odwiedzających na front-endzie.
Utwórz div i rozpoznawalny identyfikator dla niego w oparciu o twoje potrzeby, podobnie jak w poniższym przykładzie:
W tym kontenerze możesz dodać dowolną zawartość.
Zamierzam zbudować niestandardową stronę główną z dużym obszarem na górze dla wezwania do działania, trzema mniejszymi sekcjami pod oddzielnymi kolumnami, w których umieszczę monity i kolejną sekcję poniżej, aby uzyskać dodatkowe informacje.
Aby to osiągnąć, dodam poniższy kod do mojego wypełnionego inaczej indeks.php plik i dodam również div W tym powyżej.
Po dodaniu głównego div a wszystkie inne treści, które chcesz dołączyć, masz podstawy, których potrzebujesz, aby zbudować swój pierwszy flexbox. Aby to osiągnąć, potrzebujesz – jak pewnie już zgadłeś-trochę CSS.
Tworzenie i stylizacja Twojego Flexboxa
Aby utworzyć flexbox, musisz zdefiniować wyświetlacz własność dla Twojego kontenera. Powinno to wyglądać podobnie do poniższego przykładu:
Tworzy to flexbox na poziomie bloków. Alternatywnie, jeśli chcesz zastosować style inline, możesz wpisać inline-flex zamiast flex.
Teraz możesz dodać stylizację elementów flex pod nowym flexboxem, który właśnie utworzyłeś.
Chociaż właśnie stworzyłeś swój pierwszy flexbox, nie dodałeś jeszcze żadnych właściwości związanych z flexbox, aby zobaczyć, jak wiele możesz z nim zrobić. Na przykład możesz użyć flexbox, aby zachować responsywność treści, dzięki czemu będzie ona dobrze wyświetlana na wszystkich urządzeniach.
Stylizacja dla responsywności
Istnieje wiele właściwości, które możesz uwzględnić w swoim flexboxie, a aby pomóc stworzyć stronę, która jest responsywna, możesz zamówić elementy flex.
Aby umieścić swoje elementy flex w wybranej kolejności, wystarczy zamów i skróty flex własność.
Chociaż istnieje wiele właściwości, których możesz użyć do dostosowania zawartości, takich jak flex-basis, flex-grow oraz flex-shrink właściwości, W3C zaleca użycie skrótu i jest to w postaci pojedynczej właściwości o nazwie flex.
Oto przykład tego, jak te właściwości wyglądają w działaniu na stronie głównej, którą tworzę:
Wiem, wydaje się w porządku, ale co to wszystko znaczy, prawda? To może wydawać się trochę trudne do naśladowania na początku, ale to nie jest zbyt trudne do zrozumienia, gdy się go powiesić.
Na zamów właściwość po prostu potrzebuje numeru, aby powiedzieć przeglądarce, który element flex ma być wyświetlany przed innymi. Zaczynając od jednego, możesz wybrać, który element flex ma być pokazany jako pierwszy. An zamów z 2 wyświetli drugi element flex, zamówienie: 3; wyświetli element trzeci i tak dalej.
Możesz także użyć liczb ujemnych. Jeśli nagle zauważysz podczas edycji, że musisz dodać element flex przed pierwszym, który jest już zamówiony, możesz ustawić nowy element flex na zamówienie: -1; jest więc wyświetlany przed pierwszym elementem flex. Poręczne, prawda?
Stenografia flex nieruchomości to miejsce, w którym sprawy zaczynają wyglądać na nieco skomplikowane. Na szczęście istnieje dość proste wyjaśnienie: ta Właściwość ustawia elastyczny rozmiar elementu flex w stosunku do całkowitego rozmiaru flexbox.
Zasadniczo można ustawić rozmiar elementu flex do skalowania na podstawie dostępnej przestrzeni. Oznacza to, że jeśli użytkownik odwiedza witrynę na urządzeniu mobilnym, można ustawić zawartość tak, aby automatycznie kurczyła się, aby pasowała do rozmiaru ekranu lub w przypadku przeglądarek stacjonarnych zawartość może rosnąć, aby pasowała do całego rozmiaru okna.
Nie wszystkie elementy flex muszą to jednak robić, ponieważ można wyłączyć elastyczne rozmiary dla elementów flex, które muszą pozostać w określonym rozmiarze. Na przykład możesz chcieć, aby mała reklama pozostała tego samego rozmiaru na wszystkich ekranach, ponieważ twój Klient może się zdenerwować, jeśli pobierasz tę samą cenę za obciętą ekspozycję na mniejszych ekranach.
Więc jak możesz to zrobić? Oto tajniki korzystania z elastycznego rozmiaru za pomocą skrótu flex własność.
Po pierwsze, składa się z trzech wartości od ich długoletnich odpowiedników własności:
flex-grow– Ustawia, czy i jak duży element flex może być skalowany, aby pasował do wolnej przestrzeni. To może być tylko liczba dodatnia.flex-shrink– Możesz pozwolić, aby element flex skurczył się, jeśli element jest większy niż rozmiar ekranu. Liczby ujemne nie mają wpływu.flex-basis– Początkowy rozmiar elementu flex przed zastosowaniem dowolnych elastycznych rozmiarów i przed wolnym miejscem do zajmowania lub brakiem miejsca. Można ustawić jako piksele lub procent.
Gdy już wiesz, jak działają właściwości longhand, możesz zacząć kodować w skrócie:
flex: początkowylubflex: 0 1 auto– To ustawienie sprawia, że rozmiar elementu flex w stosunku do zawartości, która jest w nim. Rośnie, jeśli jest dużo treści i kurczy się, jeśli jest tylko kilka linii tekstu, na przykład. Jeśli jest wolne miejsce, przedmiot nie rośnie, aby dopasować się do całego obszaru, ale jest ustawiony na kurczenie się, jeśli brakuje miejsca.flex: autolubflex: 1 1 auto– Każda z tych opcji pozwala elastycznemu elementowi kurczyć się i rosnąć w razie potrzeby, aby dopasować go do dowolnego rozmiaru ekranu, na którym przeglądana jest strona.flex: braklubflex: 0 0 auto– Wyłącza to elastyczne rozmiary i ustawia rozmiar elementu flex, aby był stały i nieregulowany dla użytkownika końcowego przeglądającego witrynę na dowolnym rozmiarze ekranu.- Względne elastyczne rozmiary z
flex: 1% px– Liczba dodatnia, którą wpisujesz jako pierwszą, określa część wolnego miejsca zajmowanego przez twój element flex w stosunku do innych elementów flex, jeśli używają tego samego wzoru. Druga liczba pozwala zmniejszyć element na mniejszych ekranach. Trzecia wartość w pikselach lub procentach ustawia początkowy rozmiar elementu flex, ale należy pamiętać, że również wyłączaflex-basiswłaściwość, co oznacza, że początkowy rozmiar nie jest gwarantowany. Jeśli jest wystarczająco dużo miejsca, aby wyświetlić ten początkowy rozmiar, jest on pokazywany, ale jeśli nie ma wystarczająco dużo miejsca, dokładny rozmiar nie jest wyświetlany. Jest to szczególnie ważne, gdy kolejność pozycji jest niższa na liście, a inne poprzednie pozycje w kolejności zajmują większość miejsca. Przykładem takiej opcji będzie flex: 2 1 0%.
Aby którakolwiek z tych opcji działała, musisz najpierw ustawić rozmiar flexbox z wysokością i szerokością. Rozmiar, który wybierzesz, zależy całkowicie od twoich konkretnych potrzeb.
Opierając się na powyższym przykładzie arkusza stylów, oto jak Twój CSS flexbox może wyglądać po dodaniu rozmiaru:
Dzięki tej konfiguracji wszystkie elementy flex w tym przykładzie są wyświetlane w tej samej linii. Ponieważ chcę wyświetlić wezwanie do działania, z dodatkowymi monitami bezpośrednio pod nim i dodatkowymi informacjami wyświetlającymi ostatnią i nową linię, muszę dodać flex-flow właściwość i ustaw ją tak, aby zawijała zawartość w wiersze.
Aby dokonać tej konfiguracji, muszę dodać tę właściwość do flexbox i oto jak to wygląda z kodem, który stworzyłem dla mojej strony głównej:
Gdy jeden lub więcej elementów flex zajmuje długość flexbox, pozostałe elementy Flex zamówione po nich są umieszczane w nowym wierszu.
Podstawowa struktura jest już skonfigurowana, ale ponieważ nie dodałem żadnych dodatkowych stylizacji, takich jak kolory tła, nie będzie to wyglądać zbyt wiele, gdy zobaczysz stronę. Aby dać Ci lepsze wyobrażenie o tym, jak powinna wyglądać ostateczna stylizacja mojej strony głównej, dodam dodatkową opcjonalną i podstawową stylizację:
Dodałem również znaczniki akapitowe do części HTML, aby móc stylizować tekst:
Pamiętaj tylko, że jeśli zdecydujesz się na włączenie min-szerokość właściwość w przypadku elementów flexbox lub flex może spowodować, że flexbox nie będzie działał zgodnie z oczekiwaniami i może zastąpić ustawienia flexbox.
Efekt końcowy tworzy bardzo podstawową stronę główną, ale wyznacza fundament. Przy odrobinie pracy i większej stylizacji możesz stworzyć responsywną stronę WordPress i witrynę, której pragniesz.
Wrapping Up
Postęp w trzeciej wersji CSS przyniósł ostatnio @ media reguły i inne ulepszenia, które znacznie ułatwiły tworzenie nowoczesnych, responsywnych układów i motywów. Teraz, dzięki proponowanemu flexbox in draft, możesz tworzyć nowoczesne projekty bez użycia hacków CSS dla czystszego kodu, który jest również znacznie łatwiejszy do napisania.
Teraz masz wszystkie narzędzia potrzebne do rozpoczęcia pracy z flexbox od razu, ale istnieje wiele innych właściwości, których możesz użyć, aby osiągnąć jeszcze więcej. Na szczęście możesz uzyskać dostęp do pełnej listy w roboczym projekcie flexbox W3C.
Ponieważ wciąż mogą istnieć zmiany, które są stosowane w flexbox, dobrym pomysłem jest śledzenie dokumentu roboczego dla flexbox, aby być na bieżąco z najnowszymi osiągnięciami.
Jeśli chcesz fajny sposób, aby pomóc cementować to, czego nauczyłeś się w tym poście, Gorąco polecam zapoznanie się z Flexbox Froggy, zabawną grą zaprojektowaną, aby pomóc ci lepiej zrozumieć, jak działa flexbox i jego właściwości.
Kredyty na zdjęcia: Scotch.io
Tagi:
