Przewodnik dla początkujących po właściwościach Flexbox CSS

Dobry układ zaczyna się od wyraźnego modelu wyrównania i odstępów. FlexBox zapewnia ten model poprzez organizowanie zawartości wzdłuż pojedynczej osi z przewidywalną kontrolą w kierunku, wyrównaniem, owijaniem i szczeliną.

Ten post obejmuje podstawy tych właściwości CSS i sposób, w jaki współpracują. Po podstawach pokazujemy, w jaki sposób to samo podejście jest wdrażane wizualnie w Divi 5 przy użyciu systemu układu FlexBox. Przejdźmy do tego!

Co to jest CSS Flexbox?

Ruch mobilny wyprzedzanie komputerów stacjonarnych zmieniło projektowanie stron internetowych. Deweloperzy potrzebowali układów pracujących na telefonach, tabletach i komputerach stacjonarnych. Stare metody często nie powiodły się.

Flexbox naprawił to. CSS Flexbox dostosowuje elementy. Dodaj wyświetlacz: Flex to pojemnik, a jego bezpośrednie dzieci stają się elastyczne. Mogą rosnąć, kurczyć się lub pozostać ustalonym na podstawie przestrzeni.

Flexbox składa elementy w linii prostej, albo rzędy od lewej do prawej lub kolumny od góry do dołu. Wybierasz kierunek.

Pojemnik kontroluje układ. Ustawiasz sposób, w jaki elementy są wyrównane i wyposażone, takie jak równomiernie, wyśrodkowane lub ułożone w stos. Właściwość GAP dodaje spójną przestrzeń między przedmiotami bez dodatkowych marginesów lub wyściółki. Starsze techniki wymagały trudnej matematyki marginesowej i często pękają.

Tradycyjna metoda dokonuje wyborów losowych odstępów: 10px tutaj, 20px tam, 40px gdzie indziej. Te rozproszone wartości powodują niespójności i utrudniają dowiedzieć się, które odstępy mają zastosowanie. Właściwości GAP usuwają zgadywanie, używając jednej spójnej reguły dla wszystkich elementów.

Szybki przewodnik po FlexBox i jego właściwości

Flexbox dzieli się na dwa obozy: właściwości dla pojemników i właściwości dla przedmiotów. Właściwości kontenerów wpływają na całą grupę, a właściwości przedmiotów pozwalają dostosować poszczególne elementy. Większość układów potrzebuje tylko garstki tych nieruchomości, takich jak:

Wyświetlacz: Flex

Zmień dowolny element w kontener Flex, dodając wyświetlacz: Flex. Jego bezpośrednie dzieci stają się eleganckimi przedmiotami. Elementy domyślnie ustawiają się w rzędzie zamiast układania standardowych elementów blokowych. Twoje bóle głowy znikają, ponieważ elastyczne elementy są zgodne z innymi regułami niż zwykłe elementy. Pojemnik kontroluje teraz, w jaki sposób zachowują się jego dzieci (lub przedmioty), a także uzyskasz przewidywalne wyniki zamiast zwykłych niespodzianek CSS.

kierunek flex

Wybierz, który kierunek przepływam. Użyj wiersza do układu po lewej do prawej.

i kolumna do układania elementów pionowo.

Dodaj odwrotność do jednego, a elementy całkowicie odwracają ich zamówienie.

Ten wybór ustawia oś centralną, co wpływa na działanie innych właściwości.

Przełączanie się z wiersza na kolumnę zmienia się w jaki sposób zachowują się uzasadnione i wyrównane, więc kierunek jest na pierwszym miejscu w planowaniu.

justify-content

Ta właściwość rozkłada resztki przestrzeni wzdłuż oś środkowej. Przedmioty biorą to, czego potrzebują, a następnie ta właściwość obsługuje resztę. Użyj Flex-Start, aby zebrać wszystko na początku, środku, aby skupić przedmioty na środku, i Flex-end, aby położyć wszystko pod koniec. Jednocześnie przestrzeń jest używana do rozprzestrzeniania przedmiotów za pomocą równych luk. Wartość kosmiczna daje każdemu przedmiotowi równe miejsce po obu stronach, podczas gdy przestrzeń-nawet stwarza identyczne luki wszędzie.

Wyrównanie

Obsługuje wyrównanie na osi krzyżowej. W przypadku układów poziomych oznacza to wyrównanie pionowe. W przypadku układów pionowych kontroluje pozycjonowanie poziome. Obsługuje wartości takie jak Flex-Start, Center, Flex-end, rozciąganie i wartości wyjściowe (nie przestrzeń*). Ustaw go na środku, a przedmioty wyrównują się do środka, niezależnie od ich wysokości. Wartość domyślna to rozciąganie: Przedmioty rozciągają, aby wypełnić krzyżowy kontener. Jeśli przekrój kontenera jest automatyczny, często równa się najwyższym elemencie, więc przedmioty wydają się równa wysokość.

Flex-Wrap

Decyduje, co się stanie, gdy przedmioty zabraknie miejsca. Domyślny Nowraph utrzymuje wszystko na jednej linii, zmniejszając przedmioty. Przełącz się na opakowanie i przedmioty, które nie pasują do nowych linii przy jednoczesnym utrzymaniu preferowanych rozmiarów. Możesz także odwrócić kierunek owijania. Opakowanie zamienia pojedynczą linię w wiele linii, tworząc układy przypominające siatki.

luka

Dodaje przestrzeń między przedmiotami bez bałaganu z marginesami. Ustaw lukę: 20px, a każdy element ma spójne odstępy. W razie potrzeby możesz ustawić różne luki poziome i pionowe. Przestrzeń pojawia się tylko między przedmiotami, a nie wokół krawędzi. To bije obliczanie marginesów, które przełamują, gdy zmienisz układy później.

Te właściwości działają dobrze, gdy je zdobędziesz. Trudna część polega na pamiętaniu, co każdy robi i wpisywanie wszystkiego, co CSS. Piszesz kod, odświeżasz przeglądarkę, widzisz, że nie jest w porządku, a następnie wracaj i dostosuj. Wizualne budownicze, takie jak Divi, odwracają to, pozwalając kliknąć przyciski zamiast pisać nazwy właściwości.

Divi 5 sprawia, że ​​FlexBox Visual

Jak ustaliliśmy, nauka FlexBox to jedno; Pamiętając o tym, co Justify-Content: Space-Between to inna. Spędzasz więcej czasu na pisaniu nieruchomości niż projektowanie. Zamiast pisać CSS, używasz przycisków i suwaków, które pokazują dokładnie, co robi każda opcja w budowniczym Divi. Divi 5 przenosi to do FlexBox, zamieniając abstrakcyjne pojęcia w proste, klikalne elementy sterujące.

Zanim nurkujemy głębiej, krótko spójrzmy na Divi.

Co to jest Divi?

Divi to konstruktor stron internetowych, który sprawia, że ​​WordPress działa dla osób, które chcą przystojnych stron bez kłopotów.

Możesz przeciągnąć dowolne ponad 200 modułów wokół strony i zmienić tekst tam, gdzie siedzi. Wybierz kolory i obserwuj, jak pojawiają się natychmiast podczas pracy na prawdziwej stronie, a nie podgląd, który może cię później okłamać.

Temat obejmuje ponad 2000 układów dla restauracji, fotografów, konsultantów i innych firm, dzięki czemu możesz znaleźć taki, który lubisz, i dostosować, dopóki nie zadziała dla twoich potrzeb.

Konstruktor motywów daje kontrolę nad każdą częścią Twojej witryny. Możesz zaprojektować nagłówki, które wyróżniają się, zamiast wyglądać jak wszyscy inni, budować strony blogowe, które ludzie chcą czytać, a nawet sprawić, by twoje 404 strony były wystarczająco interesujące, że odwiedzający trzymają się zamiast wychodzić.

Divi Ai pomaga szybko budować

Pewnego razu tworzenie tematów i szablonów oznaczało żonglowanie różnymi aplikacjami do kopii, zdjęć i pomysłów na projekt. Divi AI gromadzi wszystko, czego potrzebujesz w jedno zunifikowanym interfejsie: dokładnie tam, gdzie budujesz swoje strony internetowe.

Powiedz mu, że potrzebujesz tekstu i pisze go.

Poproś o niestandardowe obrazy, a to je tworzy. Możesz nawet opisać edycje zdjęć i oglądać, jak wprowadzają zmiany.

Ponadto obsługuje kod i buduje nowe sekcje, gdy pytasz.

Divi Quick Sites oszczędza Cię przed wpatrzeniem się na pustą stronę, nie wiedząc, od czego zacząć. Możesz wybrać z witryn startowych zaprojektowany przez nasz zespół, z oryginalnymi obrazami i dziełami sztuki, które wyglądają dobrze.

Możesz także opisać swoją firmę na witrynach Divi Quick i pozwolić jej zbudować od zera za pomocą sztucznej inteligencji. Te witryny zbudowane przez AI mają prawdziwe nagłówki, kopiowanie i obrazy pasujące do twojego opisu.

Wygeneruj wszystko za pomocą sztucznej inteligencji, pobieraj zdjęcia z Unsplash lub upuszcz symbole zastępcze dla swoich zdjęć. Najpierw ustaw czcionki i kolory, a następnie pozwól AI obejść wybory marki, jednocześnie utrzymując wszystko edytowalne.

Divi 5: przyszły konstruktor stron internetowych

Divi 5 odbudowuje całe ramy od podstaw.

Wizualny budowniczy uruchamia gładsze, strony renderowanie szybciej, a baza kodu może skuteczniej obsługiwać nowoczesne standardy sieciowe. Otrzymujesz czystsze znaczniki, lepszą wydajność i fundament gotowy na teraźniejszość i przyszłość.

Interfejs również się usprawnia. Ustawienia wydają się bardziej logicznie zorganizowane, a codzienne zadania wymagają mniej kliknięć. Ogólne doświadczenie wydaje się bardziej responsywne, bez względu na to, czy budujesz proste strony czy złożone układy.

Otrzymujesz to samo wizualne podejście do budynku, które znasz, tylko z znacznie silniejszym podkładem pod spodem.

Co nowego w Divi 5

Nowa architektura otwiera drzwi dla funkcji, które wcześniej nie były możliwe. Te ponad 18 dodatków zmienia sposób budowania i zarządzania stronami internetowymi.

Oto przykład tego, co dostajesz:

• System układu FlexBox: kontrole wizualne do wyrównania, odstępu i pozycjonowania. Elementy mogą automatycznie rosnąć, zmniejszać lub owijać nowe linie. Współpracuje z zagnieżdżonymi rzędami i grupami modułów dla złożonych układów bez kodu.
• Zagnieżdżone rzędy: umieść rzędy w innych rzędach z nieskończonym gniazdowaniem. Zbuduj złożone struktury układu bez obejścia kodu.
• 17 moduły WooCommerce: kompletne budownicze stron produktów, w tym galeria produktów, dodaj do koszyka, recenzje, oceny, powiadomienia zapasowe, bułkę, meta produktu, upsells i wiele innych. Wkrótce moduły wózka i kasy wkrótce.
• System interakcji: Twórz wyskakujące okienka, przełączniki, animacje przewijania, efekty ruchu myszy i wyzwalacze rzutni. Wymieszaj wiele wyzwalaczy dla złożonych zachowań, takich jak banery promocyjne, które zanikają po przewijaniu.
• Responsive Editor: Pozwala przeglądać, edytować i resetować responsywne stany podnoszące i lepkie dla każdego ustawienia jednocześnie bez przełączania trybów widoku dla szybszych, bardziej precyzyjnych i mniej zagraconych edycji.>
• Builder Loop: Buduj dynamiczną zawartość, która pobiera z Twojej bazy danych. Utwórz niestandardowe układy postów, siatki produktów i powtarzające się sekcje. Współpracuje z produktami WooCommerce.
• Presete grupy opcji: Utwórz style wielokrotnego użytku dla typografii, granic, cieni i tła. Zastosuj je w dowolnym kompatybilnym elemencie, a nie tylko pojedynczych modułach.
• Zmienne projektowe: Ustaw globalne wartości dla kolorów, czcionek, odstępów, liczb, obrazów i tekstu. Zmień swój podstawowy kolor raz, a będzie on aktualizowany wszędzie automatycznie.
• Zaawansowane jednostki CSS: Użyj funkcji Clamp (), calc (), min () i max () poprzez kontrole wizualne. Brak kodu do responsywnej typografii i obliczeń odstępów.
• Względne kolory i HSL: Twórz matematycznie piękne systemy kolorów. Zbuduj zmiany kolorów, które automatycznie utrzymują harmonię, gdy kolor podstawowy zostanie zmieniony.

I więcej nadchodzi! Nasz zespół programistów nadal dodaje funkcje ~ co dwa tygodnie, przygotowując się do publicznego wydania beta.

Szybki przegląd konfiguracji FlexBox Divi 5

Wizualne podejście Divi 5 usuwa zgadywanie z implementacji FlexBox. Zamiast zapamiętywać nazwy właściwości i pisać CSS, otrzymujesz przyciski i suwaki, które pokazują dokładnie, co robi każda kontrola. Spójrz, jak to jest łatwe.

1. Konfigurowanie pierwszego rzędu Flex

Zacznij od wybrania struktury wiersza z rozszerzonego wyboru szablonu. Divi 5 oferuje wiele innych opcji układu, w tym równe kolumny, siatki z wielu rzędów i konfiguracje wielu kolumnowych.

Nowe sekcje w Divi 5 zaczynają się automatycznie z FlexBox. Po dodaniu świeżego rządu jest gotowy z włączonymi właściwościami Flex. Ale jeśli pracujesz z istniejącymi sekcjami ze starszych wersji Divi, musisz je ręcznie przełączyć z domyślnego układu bloku, aby FLEX, klikając ikonę Ustawienia w wierszu, nawigując do układu Projektu> i zmieniając „blok” na „Flex”.

2. Zrozumienie kierunku, przepływu, wyrównania

Twoje pole kierunku układu określa, gdzie kończą się przedmioty. Row jest ustawieniem domyślnym, które sprawia, że ​​elementy ustawiają się w poziomie.

Przełącz na kolumnę, a elementy układają elementy pionowo jak zwykłe układy internetowe.

Obie opcje zawierają odwrotne wersje, które całkowicie odwracają zamówienie.

Tymczasem Justify Treści decyduje o tym, co stanie się z resztką przestrzeni wzdłuż głównej osi. W przypadku rzędów start oznacza lewe, środkowe centra poziome i końcowe wyrównuje w prawo.

W przypadku kolumn start oznacza top, środkowe centra wszystkiego, a EN End popycha elementy na dno.

Oprócz standardowego wyrównania startów, środków i końcowych masz również przestrzeń między rozkładanymi przedmiotami z równymi lukami, idealną do menu nawigacyjnego lub układów kart.

Przestrzeń wokół daje każdemu przedmiotowi równe oddychanie po obu stronach, co jest przydatne, gdy chcesz spójne marginesy. I przestrzeń równomiernie tworzy identyczne luki wszędzie, idealne dla zrównoważonych odstępów wizualnych.

Wyrównanie elementów działa prostopadle do kierunku przepływu. Jeśli wybierzesz układ wiersza, kontroluje to pionowe pozycjonowanie elementów.

Jeśli wybrałeś układ kolumny, obsługuje wyrównanie poziome.

Centrum utrzymuje wszystko, co jest wyrównane do środka, początkowe pozycje na początkowej krawędzi, koniec przesuwa je do dalekiej krawędzi, a rozciąganie sprawia, że ​​przedmioty wypełniają dostępną przestrzeń.

Kontrole te rozwiązują wspólne bóle układu układu bez niestandardowych obliczeń CSS.

3. Rozstaw rzeczy za pomocą kontroli szczeliny

Sterowanie luki dodają przestrzeń między elementami Flex w pojemniku: kolumny, moduły i dowolne działanie typu treści. Gapy tworzą pokój oddechowy bez brudnej wyściółki lub matematyki marginesowej. Różnica pojawia się tylko między przedmiotami, a nie wokół zewnętrznych krawędzi.

Ustaw szczelinę poziomą na 20px, a każda kolumna będzie miała dokładny odstęp.

Zmień lukę pionową na 20px, a wszystkie luki będą aktualizować natychmiast.

Divi 5 obsługuje zaawansowane jednostki CSS, takie jak długości i wartości procentowe. Możesz użyć Clamp () do responsywnych luk, które skali między rozmiarami ekranu. Obsługiwana jest również funkcja calc (), która łączy jednostki takie jak calc (2rem + 10px).

Kontrole luki tutaj obsługują również zmienne projektowe. Dodaj zmienną liczbową o nazwie „pozioma szczelina kolumnowa” z zaciskiem (16px, 2vw, 32px) jako wartość. Zastosuj tę zmienną do kontroli szczeliny w całej witrynie.

Kiedy chcesz późniejszy rozstaw, edytuj zmienną; Każda luka zostanie natychmiast zaktualizowana.

4. Kontrolowanie, w jaki sposób opakowania elementów

Układanie układu kontroluje to, co dzieje się, gdy elementy zabraknie poziomej przestrzeni. Domyślne ustawienie bez opakowania utrzymuje wszystko na jednej linii, zmniejszając przedmioty, aby pasowały do ​​pojemnika. Przełącz się na opakowanie i przedmioty, które nie pasują do nowych linii przy zachowaniu naturalnych rozmiarów.

Odwrotność Wrap robi to samo, co zwykłe opakowanie, ale odwraca kierunek. Nowe linie pojawiają się powyżej poprzednich zamiast poniżej.

Daje to kontrolę nad hierarchią wizualną, gdy elementy przepełnią. Zachowanie owijania pozostaje spójne w różnych rozmiarach ekranów, więc układ dostosowuje się przewidywalnie od komputera na urządzeniach mobilnych bez łamania.

Divi 5 daje również kontrole wyrównania owijania. Ta funkcja pojawia się automatycznie, gdy włączasz formularze elastyczne i wielokrotne. Gdy kierunek jest ustawiony na rząd, dostosowanie do pakowania jest dostępne do wyrównania pionowego.

Podobnie w kierunku kolumny opcje dotyczą wyrównania poziomego.

Rozciąganie sprawia, że ​​wszystkie linie rozszerzają się, aby wypełnić dostępną przestrzeń pionową. Rozpocznij wiązki linii na początku, środkowe klastry pośrodku i zakończ, popychając je w kierunku przeciwnej krawędzi.

Przestrzeń między rozłożonymi liniami z równymi szczelinami, przestrzeń wokół daje każdej linii równe oddychanie po obu stronach, a przestrzeń równomiernie tworzy identyczne szczeliny między wszystkimi liniami.

Działa to idealnie dla układów kart, galerii obrazów lub dowolnej treści, które muszą naturalnie przepływać przez wiele wierszy. Przedmioty utrzymują swoje proporcje i odstępy, jednocześnie przestawiając się na podstawie dostępnej szerokości. Dostajesz czyste przerwy bez zmiażdżenia przedmiotów na małych ekranach.

5. Praca na różnych rozmiarach ekranu

Siedem punktów przerwania Divi 5 daje szczegółową kontrolę nad tym, jak dostosowują się twoje układy.

Każdy punkt przerwania działa niezależnie, dzięki czemu możesz przełączyć kierunek układu na kolumnę na urządzeniach mobilnych, podczas gdy układ wierszy stacjonarnego pozostaje nietknięty. Możesz wyśrodkować wszystko na telefonach, ale zachowaj przestrzeń między wyrównaniem na większych ekranach.

Twoja trzykolumnowa konfiguracja pulpitu może stać się stosem jednokologicznym na urządzeniach mobilnych bez wpływu na środkowe punkty przerwania. Każdy rozmiar ekranu dostaje dokładnie to, co działa najlepiej w przypadku tego przeglądania.

Nowy edytor responsywny sprawia, że ​​proces ten jest znacznie płynniejszy. Kliknij ikonę responsywnej edytora obok dowolnego ustawienia, aby wyświetlić i zmodyfikować wartości dla wszystkich rozmiarów ekranu jednocześnie.

Jeśli jednak używasz wartości Clamp () do szczeliny rzędów i kolumn, automatycznie skaluje się między punktami przerwania bez konieczności ręcznych zmian.

6. Tworzenie ustawień grupowych opcji

Po uzyskaniu układu FlexBox działający tak, jak chcesz, możesz zapisać te ustawienia jako ustawienie grupy opcji, klikając opcję Presets Group opcji i trafnie ją oznaczając.

Twoje wartości luki, wybory wyrównania i ustawienia opakowania są łączone razem. Po kliknięciu zapisu ta dokładna konfiguracja układu staje się wielokrotnego użytku w całej witrynie. Gdy chcesz użyć zapisanego ustawienia, kliknij ikonę ustawienia wstępnego w nowym wierszu i wybierz właśnie zapisany wstępnie.

Preset utrzymuje nienaruszone zaawansowane jednostki. Twoje responsywne odstępy przenoszą się na całą konfigurowaną matematykę, a zmiany zostały nawet wprowadzone w różnych punktach przerwania.

Zacznij dziś z Flexbox Divi 5

Flexbox eliminuje margines i matematykę wyściółki, która pęka po zmianie układów. Przestajesz bawić się responsywnymi projektami z zapytaniami multimedialnymi i niestandardowymi sekcjami.

Divi 5 zamienia te abstrakcyjne właściwości CSS w kontrolę wizualną. Możesz kliknąć przyciski, aby ustawić kierunek, przeciągnąć suwaki, aby wyregulować szczeliny i włączać i wyłączać. Responsywny edytor obsługuje wszystkie siedem punktów przerwania z jednego panelu, więc widzisz wyniki natychmiast zamiast zgadywać w kodzie.

Oszczędzaj udane kombinacje jako ustawienia wstępne i ponownie je wykorzystaj w dowolnym miejscu. Spędzasz czas na projektowaniu zamiast debugowania składni CSS.