5 pułapek, których należy unikać podczas przełączania na system układu FlexBox Divi 5

Divi 5 właśnie wysłał swój system układu oparty na wszystkich nowym flexbox. Zastępuje stary silnik układu blokowego Divi 4 i odblokowuje mocne nowe elementy sterujące tuż u konstruktora wizualnego. Każdy nowy wiersz domyślnie jest teraz domyślny, aby FLEX. O ile nie korzystałeś już z CSS Flexbox, ta zmiana wymaga nowego sposobu myślenia o projekcie, ponieważ Flex działa inaczej. Jeśli nie dostosujesz swoich nawyków, utkniesz.

Ta aktualizacja daje wizualne elementy sterujące owijanie, kierunek, odstępy, zamawianie i wyrównanie - wszystko wbudowane. Brak niestandardowych CSS. Jest również wyposażony w wstępnie skonfigurowane skróty wierszy do budowy złożonych struktur wierszy z minimalnymi poprawkami ustawień wyświetlania. Niektóre funkcje oparte na blokach, takie jak sekcje specjalistyczne i pełna szerokości, są przestarzałe, ponieważ Flex obejmuje teraz wszystkie te przypadki użycia.

Ten post znajduje się w pięciu największych pułapkach, które trafisz podczas zmiany modelu mentalnego z bloku na Flex w Divi 5.

Pułapka nr 1: Wymuszanie Flex do myślenia blokowego

→ Flex wymaga nowego modelu mentalnego, a nie tylko nowych elementów sterujących.

Nikt nie lubi zmian, chyba że wiedzą, że osiągają bardzo realne ograniczenia. Dla wielu stary system układu jest tym, co wiedzieli i czuli się komfortowo. Ale miał swoje ograniczenia. Ci, którzy wiedzieli wystarczająco dużo o CSS, wiedzieli, że w starym systemie brakuje rzeczy, które Flexbox został zaprojektowany, aby zaradzić. Unikanie pierwszej pułapki wymaga zrozumienia, że FlexBox to nie tylko układ blokowy z dodatkowymi opcjami .

W Divi 4 moduły domyślnie ustawiły się pionowo - każdy element siedział poniżej jednego przed nim. Możesz układać rzeczy poziomo z kolumnami, ale w tym momencie będziesz pracować z wieloma wierszami + kolumnami wewnątrz sekcji, aby zbudować układ. Było to przewidywalne i wygodne dla wielu, ale doprowadziło to również do frustrującej rzeczywistości, że nie był w stanie mieć dwóch guzików obok siebie i innych wyzwań projektowych.

Divi 5 działa teraz inaczej, ponieważ nowe kontenery (tj. Sekcje, wiersze, kolumny i grupy) są domyślnie ustawione na „Flex”. Otrzymujesz bardziej szczegółowe opcje na poziomie kontenera do układania elementów dziecięcych. FlexBox jest potężny, ponieważ pozwala na elastyczne układy, w których elementy są ustawiane na podstawie dostępnej przestrzeni i zawartości w nich. Więcej o tym w następnej pułapce . Pozwala to na dostosowanie się do różnych rozmiarów ekranu i zawartości bez polegania na ustalonym lub bezwzględnym pozycjonowaniu. Oto tylko jeden przykład do porównania Flex z blokiem.

Układy blokowe stosy moduły pionowo wzdłuż osi bloku. FlexBox pozwala wybrać między wierszem a kolumną jako oś główną.

Każde ustawienie i opcja w interfejsie użytkownika odpowiada bezpośrednio rzeczywistych właściwości CSS dodanych do każdego pojemnika.

Pitfall #2: Nie wiedząc, jak Flex Shrink & Grow pasuje do wielkości elementów dzieci

→ Bez kurczenia się i rosną, układy nie będą zachowywać się zgodnie z oczekiwaniami.

Dzięki Flex in Divi 5 moduły dziecięce mogą mieć ustaloną szerokość lub wysokość. Ponadto mogą kurczyć się lub wypełniać (szerokość lub wysokość) w zależności od pomieszczenia wewnątrz pojemnika. W tym przykładzie moduły tekstowe są ustawione na szerokość 45%, co oznacza, że dwa moduły pasowałyby poziomo, jakby w tym samym rzędzie. Ale jeśli dodamy nieparzystą liczbę modułów tekstowych, nie chcemy, aby była pusta przestrzeń. Możemy ustawić te moduły na flex, a następnie, gdy jest dostępna przestrzeń w rzędzie, moduły te będą rosły, aby wypełnić.

Divi ujawnia elementy sterujące, takie jak „rosną, wypełniając”, „kurczą się, aby dopasować” i niestandardowe ustawienia elementów dziecięcych w dowolnym kontenerze Flex (element dziecięcy> Projekt> Rozmiar> Rozmijaj, aby wypełnić, kurczyć się, aby dopasować lub niestandardowe ).

Ustawienie wysokości i szerokości na elementy dziecięce są znajome, jeśli jesteś przyzwyczajony do blokowania układów. Ale z ustawieniami FlexBox, upraw i skurczami pozwalają połączyć ustalone rozmiar z responsywnym zachowaniem - dostosowanie się do dostępnej przestrzeni w każdym pojemniku. Dodaje złożoności, ale także odblokowuje znacznie większą elastyczność.

Shrink, aby dopasować i rosnąć, aby wypełnić (oprócz Flex-basis) również bardzo przydają się w tworzeniu responsywnych układów. Aby układy blokowe były często responsywne, musisz skonfigurować wiele punktów przerwania i szerokości/wysokości na każdym z tych punktów przerwania. Flexbox może skorzystać z unikalnych ustawień w różnych punktach przerwania, ale jak sama nazwa wskazuje, jest bardzo elastyczny . Dotyczy to szczególnie stosowania Clamp () do typografii. Korzystanie z obu tych razem, wraz z innymi względnymi jednostkami CSS, złamie stałą potrzebę przerwania.

Spójrzmy na inny przykład zbudowany z Flexbox.

Pojemnik kolumnowy (nadrzędny) jest ustawiony tak, aby zginał z tymi ustawieniami:

• Pozioma i pionowa szczelina : 30px (może to wykorzystywać calc lub zacisk, aby być nieco lepszym, nawet)
• Kierunek układu : Odwrotność wiersza (wyjaśnienie tej decyzji w pułapce #4)
• Uzasadnienie treści : Center
• Wyrównaj elementy : centrum
• Flex Wrap : Wrap Reverse (wyjaśnienie tej decyzji w pułapce #4)

Następnie umieściłem trzy elementy dziecięce w kolumnie. Moduł nagłówka, moduł dzieliny i moduł tekstowy. Oto odpowiednie ustawienia dla każdego:

• Moduł nagłówka
  • Rozmiar tekstu : Zacisk (2rem, 1,5rem + 2vw, 3)
  • Szerokość : auto
  • Flex Rozmiar : kurczenie się do dopasowania
• Moduł dzielnika
  • Szerokość : auto
  • Flex Rozmiar : kurcz, aby dopasować i wyrastać, aby wypełnić
• Moduł tekstowy
  • Rozmiar tekstu : Zacisk (0,9375rem, 0,75rem + 0,4 ww, 1rem)
  • Szerokość : auto
  • Flex Rozmiar : kurczenie się do dopasowania

W kierunku rzędu elementy dziecięce ustawiają się w poziomie poziomo, gdy jest miejsce. Moduł tekstowy jest najszerszy, więc wypełnia własny rząd. Moduł podziału następnie rośnie lub kurczy się, ponieważ ma włączoną automatyczną szerokość i włączanie eleganckiego wzrostu i elest-shrink. Moduł nagłówka wykorzystuje tylko swoją wewnętrzną szerokość i pozostaje kompaktowy. Ta konfiguracja daje w pełni responsywny układ bez żadnych punktów przerwania.

Pułapka #3: Nie łamanie nawyku marginesu

→ Zamiast tego użyj luki - jest mądrzejszy, czystszy i wykonany dla Flex.

W Divi 4 szczeliny wizualne między modułami i innymi elementami wymagały marginesów (luki pionowe przez dolny brzeg, poziome szczeliny przez lewy/prawy brzeg). Gdy szczelina została zastosowana do odstępów kolumnowych, Divi 4 miało ustawienie rynny, ale nie wymagało standardowych wartości CSS i faktycznie wykorzystała margines do boków kolumn, aby utworzyć szczelinę. W ten sposób układy blokowe nadal działają. Ale teraz jest czystsze, bardziej skuteczne podejście.

System FlexBox Divi 5 wprowadza sterowanie wierszem i pionowymi lukami pod projektem> Układ > szczelina pozioma i pionowa . Te mapy do CSS Gap i Row Gap. Pionowe luki mają zastosowanie automatycznie do każdego „flex wiersza”, gdy elementy owijają się na nową linię. To samo dotyczy poziomych luk: za każdym razem, gdy obok siebie znajdują się elementy dziecięce, luka będzie obecna. Te ustawienia szczeliny akceptują również dowolną dodatnią jednostkę CSS, więc możesz użyć clamp () lub calc (), aby utworzyć responsywne odstępy od szczeliny.

Zmniejsza to potrzebę zastosowania wartości marginesu do każdego elementu dziecka. Ustawienie luki dostosowuje się automatycznie na podstawie elastycznego kierunku i liczby dzieci w pojemniku do automatycznego stosowania wszelkich luk. Marginesy wciąż mają swoje miejsce, ale ich potrzeba rozstawu elementów w pojemniku jest zmniejszona.

Pułapka nr 4: Podnoszenie odwrotnego przepływu i zamawiania kontroli

→ Porządek wizualny i semantyczne zamówienie nie muszą się dopasować.

Domyślnie elementy dziecięce w eleganckim kontenerze będą wyświetlane w kolejności źródłowej. FlexBox i Divi 5 dają możliwość określenia odwrotnych kierunków FLEX i kontroli zamówienia w celu zmiany przepływu wizualnego elementów bez zmiany uporządkowania elementów HTML.

Przełącznik kierunku odwrotnego pod kierunkiem układu pozwala odwrócić kolejność elementów w kierunku wiersza lub kolumny. Aby ponownie spojrzeć na przykład układu z pułapki nr 2, możemy zrozumieć, dlaczego chcielibyśmy tego. Według warstw można zobaczyć, że kolejność elementów dziecięcych jest nagłówek, a następnie dzielnik i wreszcie moduł tekstowy. Semantycznie posiadanie nagłówka (w tym przypadku H2) u góry stosu ma sens dla czytników ekranu. Jednak nagłówek jest wystarczająco oczywisty wizualnie, czy to pierwszy, czy ostatni, ponieważ używamy wizualnej hierarchii z jej rozmiarem tekstu.

Używanie Row Reverse jako kierunku elastycznego i odwrotności opakowania zachowuje zamawianie HTML (ważne dla dostępności), jednocześnie pozwalając mi projektować rzeczy, jak je wyobrażamy.

Możesz osiągnąć to samo przy użyciu zamawiania elementów dzieci, które można znaleźć w Divi podczas klikania ustawień elementu dziecka> Zakończenie zawartości> Zamów . Możemy zmienić kolejność, w której pojawi się tylko ten element. W tym przykładzie osiągamy ten sam wynik końcowy, ale przy innym ustawieniu - takim, który może mieć dla niektórych bardziej sens.

Pułapka nr 5: Zapominanie o ustawianiu opakowania

→ Flex nie złamie się na nowe wiersze, chyba że to powiesz.

Wspominaliśmy wcześniej, ale zasługuje na własną sekcję. Nowe elastyczne pojemniki domyślnie bez opakowania. Może to mieć nieoczekiwane konsekwencje. Na przykład, jeśli dodasz cztery moduły dziecięce, każdy o szerokości 50%, można się spodziewać, że pokażą się na dwóch eleganckich rzędach. Twoim problemem jest po prostu to, że musisz pozwolić pojemnikowi na owinięcie.

Divi zawiera przełącznik zwany owijaniem układu, który ma trzy stany: bez zwijania, owinięcia i odwrotności owinięcia. Musisz włączyć, jeśli chcesz, aby moduły pękają na nowe linie pod progiem. W ten sposób Divi obsługuje struktury wielu rzędu w jednym pojemniku (zagnieżdżone lub wiele wierszy nie jest jedynym sposobem, aby to zrobić).

Nie spiesz się na Master Flexbox

Flex in Divi 5 jest silniejszy niż poprzedni system układu tylko blokowego Divi. Wymaga to jednak pewnej nauki zrozumienia. Flexbox nie jest ustawieniem specyficznym dla Divi, więc ważne jest, aby znać podstawy tego narzędzia CSS. Divi ułatwia wdrożenie, ponieważ wszystkie ustawienia, które można zastosować w CSS, są dostępne bezpośrednio w edytorze. Ale koncepcja bardzo różni się od bloku.

Ze względu na te różnice zdecydowanie zalecamy spędzenie godziny za pomocą interaktywnego narzędzia dydaktycznego, aby zrozumieć FlexBox. Takim, który jest łatwy w użyciu i naprawdę załatwia sprawę, jest flexboxfroggy.com. Prowadzi Cię przez 24 stopniowo złożone wyzwania, ucząc wszystkich podstaw. Jest to o wiele lepsze niż Doomscrolling przez godzinę.

Użyj Flex z Divi 5 już dziś

Flexbox w Divi 5 jest uczciwy. To nie zgaduje, czego chcesz. Prosi cię o podjęcie decyzji. Ale kiedy zdecydujesz, następuje elastyczność. Możesz zbudować każdą strukturę układu odpowiedzialnie, odpowiedzialnie i niezawodnie - nawet nieskończenie zagnieżdżoną - bez niestandardowych CSS lub hacków.