Zrozumienie każdego ustawienia FlexBox w Divi 5

Flexbox i Divi 5 to potężny duet, który umożliwia użytkownikom Divi tworzenie oszałamiających, responsywnych układów. W tym poście zapewniamy ostateczny przewodnik po zrozumieniu i korzystaniu z każdego ustawienia FlexBox, aby łatwo stworzyć elastyczne, responsywne układy.

Flexbox jest w centrum odnowionego budowniczego Divi 5, umożliwiając użytkownikom budowanie oszałamiających projektów z niezrównaną kontrolą. System układu FlexBox Divi 5 sprawia, że ​​złożone układy są proste, od wyrównania zawartości po dynamiczne siatki budynku.

Zanurzmy się w środku.

Co to jest Flexbox?

FlexBox to model układu CSS zaprojektowany tak, aby ułatwić układanie, wyrównanie i rozpowszechnianie elementów w pojemniku, nawet gdy ich rozmiary są dynamiczne. W przeciwieństwie do tradycyjnych układów CSS, które opierają się na pływakach lub pozycjonowaniu, FlexBox oferuje intuicyjny sposób budowania elastycznych i responsywnych projektów, co czyni go kamieniem węgielnym nowoczesnego rozwoju stron internetowych.

Subskrybuj nasz kanał YouTube

Kluczowe koncepcje FlexBox

Flexbox działa wokół kilku podstawowych pojęć:

• ELEX Contener: Element nadrzędny, który ma wyświetlanie: zastosowano flex lub flex-flex , ustanawiając zawartość Flex. Ten pojemnik decyduje o tym, jak zachowują się jego dzieci w ramach układu.
• Elementy elastyczne: bezpośrednie dzieci pojemnika Flex, które są ułożone i wyrównane zgodnie z właściwościami Flex pojemnika.
• Oś główna i oś krzyża: Flexbox działa wzdłuż osi głównej (poziomy jako rząd lub pionowo jako kolumna) i prostopadłą oś krzyżową. Kierunek głównej osi może dostosować się do różnych trybów, takich jak od lewej do prawej do lewej, zapewniając elastyczność dla globalnych projektów.

Flexbox w Divi 5: Nowa era

System układu FlexBox Divi 5 jest wbudowany w wizualny budowniczy, co pozwala użytkownikom Divi tworzyć responsywne układy z intuicyjnymi elementami sterującymi. Ustawienia te są stosowane przede wszystkim do sekcji, wierszy, kolumn i grup modułów, umożliwiając wizualne manipulowanie zachowaniem układu bez pisania CSS. FlexBox ułatwia wyrównanie, kolejność i łatwą transformację elementów.

Dostęp do Flexbox w Divi 5

Dostęp do Flexbox w Divi 5 jest prosty i intuicyjny. Otwórz The Visual Builder, dodaj nowy wiersz i przejdź do zakładki projektowej. Ustawienia FlexBox znajdziesz w ramach rozwijania układu.

Ustawienia te są stosowane na poziomie kontenera Flex (sekcje, wiersze itp.), Kontrolując zachowanie swoich elementów Flex. Interfejs Divi wyświetla ustawienia poprzez opcje przyjazne dla użytkownika, dzięki czemu FlexBox jest łatwy dla użytkowników wszystkich poziomów umiejętności.

Przejdźmy przez każde ustawienie, aby lepiej zrozumieć, jak działają i jak używać ich do budowy układów.

Szczegółowy rozkład ustawień FlexBox w Divi 5

Poniżej znajduje się przewodnik po każdym ustawieniu związanym z FlexBox w Divi 5. Każde ustawienie zawiera jego cel, dostępne opcje i praktyczne przypadki użycia, które pomogą je skutecznie zastosować.

Styl układu

Flex to domyślna opcja w menu rozwijanym stylu układu. Po ustawieniu pojemnika do zgięcia staje się on pojemnikiem Flex. Jego bezpośrednie elementy dziecięce (elementy Flex) można następnie elastycznie wyrównać przy użyciu właściwości CSS FlexBox.

Z drugiej strony Block to tradycyjny sposób, w jaki Divi obsługiwane w przeszłości. Elementy w pojemniku blokowym są traktowane jako elementy na poziomie bloku. Oznacza to, że na ogół układają się pionowo, zajmując pełną dostępną szerokość pojemnika macierzystego.

Pozioma i pionowa szczelina

W ustawieniach FlexBox Divi 5 pozioma i pionowa kontrola szczeliny funkcjonuje jako właściwość CSS GAP. Zapewniają skuteczny sposób na dodanie spójnych odstępów między elementami dziecka w pojemniku.

Pozioma szczelina określa przestrzeń między elementami Flex, gdy są one ułożone poziomo. W poniższym przykładzie szczelina pozioma tworzy pustą przestrzeń między każdą kolumną, ale nie na zewnętrznych krawędzi pojemnika Flex. Domyślnie % jest wybrane, ale możesz użyć dowolnej właściwości CSS Divi 5 tutaj.

Pionowa szczelina określa przestrzeń między rzędami elementów. Staje się to niezwykle ważne, gdy włączysz owijanie układu (więcej o tym później). Ma również zastosowanie, gdy kierunek układu jest ustawiony na odwrotność kolumny lub kolumny .

Kierunek układu

Opcja kierunku układu w Divi 5 (właściwość elastycznego kierunku w CSS) jest jedną z najbardziej podstawowych elementów sterujących. Określa oś pierwotną, wzdłuż której ułożone będą elementy dziecięce w pojemniku.

Pomyśl o tym jak o konfiguracji przepływu treści. Istnieją cztery główne opcje: wiersz, odwrotność wiersza, kolumna i kolumna odwrotna. Rząd jest najczęstszym ustawieniem. Elementy elastyczne ułożą się w poziomie, od lewej do prawej. Jest idealny do tworzenia tradycyjnych układów kolumnowych, menu nawigacyjnych, elementów obok siebie lub w dowolnym momencie, gdy chcesz przepływać na stronę.

Z odwrotnością wiersza elementy nadal układają się poziomo, ale w przeciwnym kierunku.

Po wybraniu kolumny elementy ustawi się w pionie, od góry do dołu. Jest to dobra opcja do układania modułów w jednej kolumnie, tworzenia pionowych list treści lub układów budowania, w których elementy muszą spływać w dół.

Odwrotność kolumny działa tak samo jak kolumna, układając elementy w obrębie kontenera w pionie, ale w odwrotnej części.

Uzasadnić treść

Opcja Divi 5's Justify Content (właściwość Justify-Conent w CSS) kontroluje wyrównanie elementów Flex wzdłuż głównej osi kontenera Flex.

Opcje obejmują Start (Flex-start w CSS), który wyrównuje elementy do początku osi głównej. Centrum wyrównuje przedmioty do środka głównego dostępu. Gdy użyjeszkierunku układu> Row, elementy będą wyśrodkowane poziomo. Jeśli używaszkierunku układu> Kolumna, elementy wyśrodkowają pionowo.ENDwyrównuje elementy na końcu (prawy lub dolny, w zależności od wyboru wiersza lub kolumny).

Użyjmiejsca międzyrównomierną dystrybucją elementów wzdłuż osi głównej. Pierwszy element jest zgodny z początkiem, a ostatni jest zgodny z końcem kontenera. Przestrzeń wokół rozkłada elementy równomiernie wzdłuż osi głównej, z równą przestrzenią wokół każdego elementu. Wreszcie przestrzeń równomiernie rozkłada przedmioty, w których odstępy między dowolnymi dwoma sąsiednimi elementami i przestrzenią przed pierwszym i po ostatnim elemencie jest takie same.

Wyrównaj elementy

Opcjeelementów wyrównania(właściwość CSS ITEMSS ITEMSEMS) w ustawieniach FlexBox Divi 5 kontrolują sposób, w jaki elementy Flex wyrównują wzdłuż osi krzyżowego kontenera Flex. Ta opcja różni się od uzasadnienia treści, która wyrównuje elementy wzdłuż osi głównej.

Po ustawieniukierunku układunawierszlubwiersz odwrotnie, oś krzyża staje się pionowa. Umożliwia towyrównanie elementówdo kontrolowania pionowego wyrównania elementów w rzędu. Jeśli ustawiszkierunek układunakolumnęlubodwrotność kolumny, oś krzyża jest pozioma. Dlatego elementy wyrównania będą kontrolować poziome wyrównanie elementów w kolumnie.

Istnieją cztery główne opcje, w tym Start, które dostosowują przedmioty do początku, środka, końca i rozciągania, które rozciągają przedmioty, aby wypełnić pełną dostępną przestrzeń wzdłuż osi krzyżowej kontenera. Pozycja o określonej wysokości lub przypisanej szerokości zastąpi odcinek.

Opakowanie układu

W ustawieniach FlexBox Divi 5, owijanie układu (właściwość CSS FLEX-WRAP) określa, co się stanie, gdy elementy Flex w pojemniku Flex zabrakło miejsca, aby owinąć na następną linię, gdy przestrzeń staje się szczelna. Istnieją trzy opcje w Divi 5, w tym brak opakowania, opakowania i odwrotności.

Żadne opakowanie nie jest domyślnym ustawieniem, które każe kontenerowi Flex, aby próbował dopasować wszystkie elementy Flex na jednej linii lub kolumnie, niezależnie od dostępnej przestrzeni. Jeśli przedmioty są zbyt szerokie, aby się dopasować, przepełnią pojemnik (rozciągają się poza granice) lub kurczą się, aby dopasować. Wrap pozwala na owinięcie elementów na nową linię lub kolumnę, jeśli przekraczają przydzielone miejsce w wierszu. Odwrotność owinięcia działa podobnie do owinięcia, ale robią to w przeciwnym kierunku, gdy owija się do następnej linii.

ELECTY FLEX na poziomie modułu

Oprócz kontroli FlexBox na poziomie sekcji, wiersza i kolumny, Divi 5 zapewnia również precyzyjną kontrolę nad poszczególnymi modułami DIVI. Na przykład podczas korzystania z modułu grupy możesz dostosować odstępy (GAP), kierunek układu i wszystkie inne ustawienia FlexBox Divi 5.

Zalety FlexBox

Flexbox w Divi 5 to nie tylko techniczna aktualizacja. Zapewnia lepszy sposób na łatwiejsze i wydajne budowanie nowoczesnych, responsywnych stron internetowych. Integrując FlexBox z wizualnym budowniczym, Divi 5 pozwala użytkownikom wszystkich poziomów umiejętności wykorzystać moc CSS bez pisania kodu. Oto kilka powodów, dla których FlexBox jest tak wpływowym ulepszeniem z Divi 4:

Intuicyjna kontrola układu bez kodu

Divi 5 integruje ustawienia FlexBox bezpośrednio z konstruktorem wizualnym, umożliwiając dostosowanie wyrównania, odstępu i zamawiania z prostymi opcjami. Niezależnie od tego, czy tworzysz równe wysokości kolumn, czy koncentrujesz treść pionowo, FlexBox ułatwia złożone układy.

Lepszy responsywny projekt

System układu FlexBox Divi 5 sprawia, że ​​responsywna konstrukcja jest prosta, dzięki konfigurowalnym sterowaniu układem dla komputerów stacjonarnych, tabletów i smartfonów. Opcja struktury kolumny zmiany Divi umożliwia zmianę liczby kolumn na tabletach i smartfonach, pozostawiając nienaruszoną strukturę kolumny układu na komputerach stacjonarnych.

Flexbox + zagnieżdżone wiersze

Łączenie zagnieżdżonych wierszy i Flexbox w Divi 5 pozwala łatwo budować skomplikowane, wielopoziomowe układy. Na przykład możesz utworzyć wiersz z kolumnami zawierającymi własny wiersz, umożliwiając wyrafinowane projekty, takie jak siatki lub sekcje treści warstwowych.

Grupy modułów Flexbox +

Grupy modułów w Divi 5 działają jako eleganckie pojemniki, umożliwiając stylizowanie i pozycjonowanie modułów grupy jako jednostki spójnej. Ułatwia to tworzenie dynamicznych sekcji, takich jak skrzynki z funkcjami lub karty referencyjne, które automatycznie dostosowują się do zmian treści przy jednoczesnym zachowaniu spójnego odstępu i wyrównania.

Poprawiona wydajność i prostota

Zastępując sekcje specjalistyczne i pełną Divi 4 na zunifikowany system oparty na FlexBox, Divi 5 usprawnia proces projektowania, zmniejszając złożoność i poprawę wydajności. Oznacza to szybszy czas ładowania i gładsze wrażenia z edycji, szczególnie w przypadku dużych lub ciężkich treści stron internetowych.

Wstępnie zbudowane szablony FlexBox dla szybkich startów

Divi 5 wprowadza nowe szablony wierszy, które wykorzystują FlexBox, aby zapewnić predefiniowane, elastyczne układy, takie jak równe kolumny, kolumny przesunięte, siatki wielorzędne i siatki wielonsienne. Te szablony inspirują kreatywność, umożliwiając wzrost konstrukcji z w pełni konfigurowalnymi strukturami za pośrednictwem ustawień FlexBox.

Przyszły przepływ pracy projektowej

Ponieważ Divi 5 nadal ewoluuje w swojej publicznej fazie alfa, jego system FlexBox układu pozycjonuje użytkowników Divi na czele nowoczesnego projektowania stron internetowych. Opanowując FlexBox teraz, wyposażasz się w umiejętności, które są zgodne ze standardami branżowymi, zapewniając, że Twoje strony pozostają dostosowywane do przyszłych aktualizacji.

Odblokuj twórczy potencjał z Flexbox w Divi 5

Flexbox w Divi 5 zmienia sposób, w jaki użytkownicy budują responsywne, dynamiczne układy. Divi 5 pozwala użytkownikom tworzyć oszałamiające, nowoczesne strony internetowe bez pisania kodu poprzez płynną integrację potężnych właściwości CSS FlexBox z Builder Visual. Od intuicyjnych kontroli wyrównania i odstępów po zaawansowane funkcje, takie jak zagnieżdżone rzędy i grupy modułów, system układu Flexbox upraszcza złożone projekty, zapewniając jednocześnie doskonale responsywne układy, które wyglądają świetnie na wszystkich urządzeniach.