Co to jest FlexBox (i dlaczego powinieneś go używać)

Możesz budować czyste sekcje przez cały dzień, ale wyrównanie elementów na każdym rozmiarze ekranu może zacząć się bardziej przypominać próbę i błędy niż celowy projekt.

Flexbox to naprawi. Daje to prawdziwą kontrolę nad tym, jak elementy siedzą, rozciągają, kurczą się i owijają w pojemniku, bez ciągłego regulacji marginesów i wyściółki. W tym przewodniku rozbijemy działanie Flexbox, jak upraszcza układy i jak korzystać z niego wizualnie w Divi 5 bez pisania pojedynczego wiersza kodu.

Co to jest Flexbox

FlexBox, skrót od elastycznego układu pudełka , to model układu, który upraszcza, w jaki sposób elementy same wyrównują i przestrzeń do pojemnika. Zamiast ustawienia każdego elementu ręcznie za pomocą marginesów lub stałych szerokości, FlexBox pozwala zdefiniować, w jaki sposób te elementy powinny zachowywać się w zależności od dostępnej przestrzeni.

Czy elementy powinny rosnąć, aby wypełnić dodatkowy pokój? Kurczyć się, gdy przestrzeń jest ciasna? Czy powinni owijać się do następnej linii, kiedy już nie pasują? Dokonujesz tych wyborów poprzez zestaw właściwości, które stosujesz do pojemnika i jego dzieci. W ten sposób decydujesz, jak powinien zareagować twój układ.

Weźmy praktyczne przykłady, aby to zrozumieć. Powiedz, że masz trzy przyciski wewnątrz poziomego rzędu. Dzięki FlexBox możesz wyśrodkować wszystkie równomiernie w pojemniku:

Zdecyduj, że środkowy przycisk powinien zająć więcej miejsca niż inne:

Lub możesz chcieć, aby przyciski automatycznie układały się, gdy ekran staje się węższy:

FlexBox umożliwia to wszystko dzięki prostym właściwościom, takim jak Justify-Content, Flex-Wrap i Flex-Brow.

Ponadto pozwala kontrolować, w jaki sposób elementy są rozmieszczone, wyrównane na różnych osiach i uporządkowane wizualnie, bez zmiany faktycznej pozycji w budowniczym. Możesz wyśrodkować zawartość, nacisnąć ją na górną lub dolną część pojemnika, wyrównać jeden element inaczej niż reszta, a nawet odwrócić całą kolejność między punktami przerwania.

Możesz pomyśleć: czy nie mogę tego już zrobić z marginesami i wyściółką?

Masz rację. Możesz wyśrodkować elementy ręcznie lub dostosować ich rozmiar za pomocą niestandardowych szerokości. Jednak metody te opierają się na pozycjonowaniu każdego elementu indywidualnie. Dostosowujesz każdy element jeden na raz, dla każdego rozmiaru ekranu.

Flexbox całkowicie przesuwa ten proces. Zamiast traktować każdy element osobno, pozwala raz zdefiniować reguły układu na poziomie kontenera. Mówisz kontenerowi, w jaki sposób jego dzieci powinny zachowywać się w różnych scenariuszach i dostosowuje je w razie potrzeby.

Takie podejście sprawia, że układy są bardziej spójne, łatwiejsze w zarządzaniu i bardziej elastyczne w miarę ewolucji projektów, szczególnie w przypadku zmiany rozmiarów ekranu lub nowych modułów.

Jak elastyczny kierunek wpływa na wyrównanie

Jednym z pierwszych wyborów dokonanych w Flexbox jest kierunek, w którym elementy powinny płynąć, czy to w rzędzie, czy w kolumnie. Właściwość flex-kierunkowa ustawia to i określa, w jaki sposób elementy wyrównują, opakowują i same w pojemniku.

Zrozummy to lepiej, ponieważ wspólne właściwości, takie jak Justify-Content i Align-Content, zależą całkowicie od ustawiania kierunku. Nie działają z domyślnego układu przeglądarki, ale osie utworzone przez FlexBox: osi głównej i osi krzyża . Oś główna podąża kierunek ustawiony w kierunku Flex: poziome dla wierszy, pionowe dla kolumn. Oś krzyżowa idzie w drugą stronę: pionowe dla wierszy, poziome dla kolumn.

Tak więc osi główny biegnie od lewej do prawej, gdy kierunek jest ustawiony na rząd. Oznacza to, że uzasadnione przemieszczanie elementów w rzędu, a wyrównanie-elementy kontrolują, jak wyrównują pionowo w tym rzędzie.

A kiedy przełączysz kierunek do kolumny, cała logika wyrównania odwraca się. Główna oś biegnie teraz od góry do dołu, co oznacza, że uzasadnienie Containt wyrównuje elementy pionowo, a ITEMEMS ALIGN dostosowuje swoją pozycję od lewej do prawej.

Na początku może wydawać się lekko mylące, ale kiedy zobaczysz, jak reagują główne i krzyżowe osie, kliknie. Zaczniesz wykrywać wzorce, a decyzje dotyczące układu wydają się bardziej intuicyjne. Poniżej znajduje się również szybka tabela referencyjna, jeśli chcesz dwukrotnie sprawdzić rzeczy podczas ćwiczeń.

Składnia i wspólne właściwości FlexBox

Przełącz właściwość wyświetlacza kontenera z bloku na Flex, aby aktywować FlexBox. Kiedy to zrobisz, przeglądarka zaczyna traktować elementy wewnętrzne, takie jak wiersze, przyciski, karty lub ikony, jako elementy Flex.

.container {
display: flex;
}

Stamtąd używasz różnych właściwości FlexBox do kontrolowania zachowania. Na przykład Justify-Content decyduje o tym, jak elementy są rozmieszczone wzdłuż osi głównej (domyślnie jest to poziome, kierunek Flex: Row) . Użyj Flex-Start, aby wyrównać elementy do lewej, Flex-end, aby popchnąć je w prawo, wyśrodkuj, aby je wyśrodkować, lub przestrzeń i przestrzeń, aby je równomiernie rozłożyć.

Domyślnie Flexbox próbuje dopasować wszystkie elementy na jednej linii. Jeśli jest ich zbyt wiele, skurczą się, aby zmieścić się na podstawie ich ustawień Flex-Shrink, a jeśli nie będą w stanie wystarczająco zmniejszyć, mogą przepełnić pojemnik. Aby temu zapobiec, włącz flex-wrap, aby elementy przechodzą na nową linię zamiast wciskać się w jedną.

Możesz już wymyślić wiele przypadków użycia, w których te dwie właściwości mogą rozwiązać problemy z układem. Ale jest ich o wiele więcej, a każdy z nich zapewnia szczególną kontrolę nad rozmiarem, kolejnością, wyrównanie i odstępy.

Jeśli jesteś ciekawy, jak te faktycznie działają w zabawny, praktyczny sposób, wypróbuj Flexbox Froggy. To zabawna, mała gra, w której stosujesz prawdziwy kod Flexbox, aby przenosić żaby wokół stawu. Po drodze przestajesz zgadywać i zaczynasz dokładnie rozpoznać, co robi każda nieruchomość.

Dlaczego warto korzystać z FlexBox

Do tej pory widziałeś, jak FlexBox zmienia, w jaki sposób układy reagują na przestrzeń. Ale prawdziwa wartość wynika z tego, co ta zmiana pozwala łatwiej zrobić. Flexbox zmienia uparty układ w proste, wielokrotnego użytku.

• Uproszczone wyrównanie: właściwości takie jak Centrum Centrum Centrum Centrum lub Wyrównanie-elementów lub elementów kosmicznych bez polegania na poprawkach marginesów lub klasach pomocniczych.
• Domyślnie responsywne: przedmioty naturalnie rosną, kurczą się lub opakowują w zależności od ich przestrzeni. Powoduje to czystsze układy, które dostosowują się bez dodatkowych punktów przerwania.
• Automatyczne odstępy i rozmiary: kontrolujesz, w jaki sposób elementy mają miejsce z właściwościami, takimi jak Flex-Ross, Flex-Shrink i Flex-Basis, tworząc płyn układu zamiast stałego.
• Zamawiień bez zmiany HTML: Możesz zmienić kolejność wizualną elementów bez dotykania HTML. Struktura pozostaje czysta, a układ dostosowuje się do różnych ekranów.
• Mniej włamań do układu: nie potrzebujesz już pływaków, przerobionych ani skryptów dopasowujących wysokość. Flexbox zastępuje te nowoczesnymi, niezawodnymi opcjami.

A ponieważ jest obsługiwany we wszystkich głównych przeglądarkach, FlexBox jest nie tylko wydajny, ale także niezawodny. To sprawia, że jest to nowoczesny, bardziej niezawodny wybór projektów w świecie rzeczywistym.

Dlaczego Flexbox jest często lepszy niż siatka

Grid to kolejny popularny system układu, taki jak Flexbox. Oba są jednak zbudowane dla różnych przypadków użycia.

Na przykład siatka jest zaprojektowana do dwuwymiarowych układów, w których potrzebujesz kontroli zarówno nad rzędami, jak i kolumnami. Produkt prezentuje, galerie obrazów i układy redakcyjne w stylu czasopism są przykładami siatki, ponieważ polegają na ściśle wyrównanej strukturze na obu osiach.

Zaczynasz od zdefiniowania siatki: ile jest rzędów i kolumn i jak powinny być szerokie lub wysokie. Następnie umieszczasz każdy przedmiot w tej strukturze.

To jest układ siatki. Elementy są wyrównane na obu osiach: rzędy i kolumny, z ustalonym odstępem i proporcjami.

Ale nie każdy układ potrzebuje tego poziomu planowania.

Przez większość czasu sekcje interfejsu użytkownika przepływają w jednym kierunku. Rzędy kart, bloków ikon-tekstowych i linków nawigacyjnych podążają za jedną oś, a nie dwie. Właśnie tam pasuje Flexbox.

W układzie FlexBox karty są wyrównane w jednym kierunku (wiersz lub kolumna), a następnie owinięte i rozmieszczone na podstawie reguł kontenera.

Nie musisz wyprzedzać cały układ. Po prostu mówisz pojemnik, w jaki sposób elementy powinny zachowywać się wzdłuż jednej osi, a FlexBox obsługuje go.

Tak więc, chyba że projektujesz coś, co naprawdę zależy od sztywnej siatki, FlexBox często będzie szybszym, prostszym i bardziej elastycznym wyborem.

Flexbox w Divi 5

Wszystko, czego do tej pory nauczyliśmy się o Flexbox, jest świetne, ale pisanie niestandardowych CSS dla każdego poprawek układu nie jest tym, co chcesz robić, zwłaszcza jeśli zbudowałeś swoją witrynę za pomocą wizualnego budowniczego takiego jak Divi.

Dlatego Divi 5 obejmuje teraz wbudowane elementy sterujące FlexBox. Nie musisz już przełączać zakładek ani ręcznie dodawać CSS. Wszystko to, a nawet zaawansowane zachowania układu, są teraz wbudowane w wizualny konstruktor, bez kodowania i przytłaczającego zaplecza.

Subskrybuj nasz kanał YouTube

Krótko mówiąc, nie trzeba pamiętać o nazwach składni lub właściwości, po prostu wybierz to, co chcesz z interfejsu. Kliknij dowolną sekcję, wiersz lub kolumnę, przejdź do zakładki Projekt i w stylu układu> Układ , upewnij się, że użyj Flex.

Otwiera to nowy zestaw kontroli układu. Są to podstawowe właściwości FlexBox, które zwykle pisałeś w CSS, ale teraz jako opcje klikalne. Możesz testować zmiany na żywo i zobaczyć, jak reaguje Twoja treść.

Więc nawet jeśli nigdy nie napisałeś ani jednego wiersza kodu Flexbox, niczego nie przegapisz. Divi 5 daje wizualnie tę samą kontrolę układu z tym samym poziomem kontroli, ale o wiele więcej.

Dowiedz się wszystkiego o systemie FlexBox Divi 5

Nowe struktury rządu

Dlaczego Divi, skoro mają to także inni budowniczowie stron internetowych? Podczas gdy wielu budowniczych stron internetowych oferuje FlexBox jako opcję układu, Divi 5 podchodzi do niego inaczej. To nie jest funkcja warstwowa na istniejącym systemie; To teraz rdzeń działania budowniczego.

Cały silnik układu został przebudowany z podłoża z Flexbox u jego fundamentu. W rezultacie zachowanie układu wydaje się bardziej spójne i przewidywalne, ponieważ jest zgodne z celowo zaprojektowaną logiką układu.

Na przykład, gdy dodasz nową sekcję lub wiersz w Divi 5, natychmiast zauważysz coś innego. Nowe struktury. Każdy z nich działa teraz na Flexbox, co oznacza, że wyrównanie, odstępy i reakcja są obsługiwane bardziej inteligentnie od samego początku.

Nie musisz włączać Flex w przypadku dodanych nowych elementów projektu. A kiedy to zrobisz, podczas edytowania starszego układu narzędzia wyrównania i odstępów stają się natychmiast łatwiejsze do zarządzania.

Możesz także zmienić sposób rozmieszczenia kolumn w wierszu za pomocą struktury kolumny zmiany.

Otwiera to panel, w którym można wybrać nową strukturę kolumny. Układ natychmiast aktualizuje, z FlexBox automatycznie dostosowując odstępy i wyrównanie.

Spróbuj dodać kilka różnych rodzajów wierszy i rozmiar ekranu. Zobaczysz, jak wszystko się zmienia i dostosowuje bez załamania. To jest siła Flexbox upieknięta w budowniczym, dzięki czemu Divi 5 jest bardziej niezawodną i nowoczesną opcją.

Jak działa Flexbox w Divi 5

Jeśli zaczynasz, oto szybki przegląd, który pomoże Ci poczuć się pewnie podczas korzystania z Flexbox w Divi 5.

Sterowanie układu

Po przełączeniu sekcji, wiersza lub kolumny w celu FLEX układ, nowy zestaw sterowania układem pojawia się w ustawieniach układu> układu . Dają one Visual FlexBox Control wraz z zwykłymi opcjami.

• (1) Styl układu: Tutaj aktywujesz Flex. Po ustawieniu widoczne są inne opcje specyficzne dla elastycznego, takie jak kierunek, wyrównanie i odstępy.
• (2) Szczelina pozioma: Dodaje przestrzeń między elementami od lewej do prawej.
• (3) Pionowa szczelina: Ustawia przestrzeń między elementami ułożonymi podczas używania układów kolumny.
• (4) Kierunek układu: Zmienia przepływ, wiersz, kolumnę lub odwrócone kierunki, aby elementy mogły wyrównać obok siebie lub od góry do dołu.
• (5) Uzasadnienie treści: wyrównuje elementy wzdłuż osi głównej. Możesz je wyśrodkować, popchnąć na bok lub rozłożyć.
• (6) Wyrównaj elementy: wyrównuje elementy wzdłuż osi krzyżowej, co jest pomocne przy aranżowaniu elementów pionowo w rzędu poziomym.
• (7) Opakowanie układu: pozwala to przejść do następnej linii, gdy skończy się miejsce. Pomocne podczas budowania układów, które reagują na rozmiar ekranu zamiast łamania.

Powiedzmy, że masz pasek marki z logo i chcesz, aby były większe. Z elastycznym kierunkiem ustawionym w rzędu i układania układu , automatycznie przepływają do dwóch rzędów, gdy nie będzie miejsca.

Wyrównanie elementów w dwóch rzędach jest teraz łatwe bez zapytań medialnych lub ręcznego obejścia.

Sterowanie kolumnowe i rozmiary

Po wejściu do wiersza obsługującego FLEX, każda kolumna ma nowe ustawienie pod projektem> Rozmiar o nazwie klasa kolumn . To określa, ile miejsca zajmuje kolumna na podstawie jej treści i otoczenia.

Możesz wybrać pomiędzy skurczem, aby dopasować (co sprawia, że kolumna jest tak szeroka jak jej zawartość) lub rosnąć do wypełnienia (który rozciąga kolumnę, aby zajmować dodatkową przestrzeń).

Na przykład, jeśli chcesz, aby kolumna tekstowa była bardziej widoczna i ma elementy karty, które obejmują ich treść, ustawiasz karty, aby się zmniejszyli, a tekst do wyhodowania.

Zamów sterowanie

Kolejnym potężnym, ale często pomijanym narzędziem jest ustawienie zamówienia na karcie treści . Umożliwia to wizualnie zmianę kolumn i modułów bez zmiany struktury układu w widoku szkieletowym lub warstw.

Powiedz, że chcesz, aby konkretny moduł pojawił się pierwszy na urządzeniach mobilnych, ale drugi na komputerze. Możesz przypisać różne wartości zamówienia w każdym punkcie przerwania.

Praktyczne użycie przypadków Flexbox

Spójrzmy na kilka kolejnych przypadków użycia FlexBox, które są teraz uproszczone za pomocą Divi 5.

1. Płynnie wyrównaj wszystko z Flex

Przez długi czas wyrównanie pionowe było jednym z najbardziej irytujących problemów układu projektowania stron internetowych. Spróbowałbyś sztuczek wyściółki, absolutne pozycjonowanie, ręczne marginesy, a co nie tylko po to, aby skończyć z czymś, co wyglądało dobrze na komputerach stacjonarnych, ale zostało złamane na mniejszych ekranach.

Z Divi 5 ten ból głowy zniknął. Teraz, jeśli chcesz wyśrodkować treść pionowo w sekcji, po prostu ustaw elementy wyrównania na środku.

To wszystko. Układ dostosowuje się automatycznie w punktach przerwania, a Twoja treść zawsze pozostaje w słodkim miejscu. To, co kiedyś przyjmowało gimnastykę CSS, to teraz tylko kilka kliknięć wewnątrz budowniczego.

2. Automatycznie wyrównanie wysokości karty

Prawdopodobnie wcześniej napotkałeś ten problem. Tworzysz wiersz kart, takich jak sekcja Blurb, i wszystko wygląda dobrze, dopóki jeden element nie będzie miał więcej tekstu niż inne. Nagle twój układ wydaje się nierówny. Niektóre kolumny rozciągają się na wyższe, inne pozostają krótkie, a projekt traci równowagę.

To ręczne czyszczenie nie jest już potrzebne. Po przełączeniu wiersza lub sekcji na Flex, Divi stosuje ustawienia domyślne, które traktują każdą kolumnę jako element Flex. To sprawia, że automatycznie rozciągają się, aby dopasować wzajemną wysokość w tym samym rzędzie, niezależnie od zawartości w środku.

Pozostaje również responsywny. Na mniejszych ekranach kolumny owijają się w nowe rzędy bez konieczności dodatkowych poprawek, a zachowanie równej wysokości nadal obowiązuje.

3. Automatycznie przyciski owinięcia w punktach przerwania

Utrzymanie rzędu przycisków schludne i czytelne na różnych rozmiarach ekranu może być uciążliwe. Zwykle w końcu dodajesz nowe wiersze lub ręcznie dostosowujesz układ dla każdego punktu przerwania. Ale z Divi 5 nie jest to już konieczne.

Włącz układ Flex i włącz owijanie układu w widoku laptopa . To wszystko. Przyciski automatycznie zawiną się w wiele linii na mniejszych ekranach bez łamania układu.

Przyciski utrzymują odstępy i wyrównanie na większych ekranach i naturalnie układają się na tabletach i telefonach. Możesz nawet dostosować ich wyrównanie za pomocą Justify-Content i kontrolować odstępy między nimi za pomocą GAP, więc wszystko wygląda na czyste i celowo przy każdym rozmiarze.

Divi + Flexbox ma po prostu sens

Widziałeś, jak działa Flexbox, jak Divi 5 sprawia, że jest wizualny i jak wspólne układy głowy trwają teraz kilka sekund. Divi 5 nie tylko obsługuje Flexbox - jest zbudowany wokół niego. Każda sekcja, wiersz i kolumna jest gotowa zachowywać się tak, jak można się spodziewać bez niestandardowych CSS.

Flexbox to nie tylko opcja, jeśli projektujesz z Divi 5. To mądrzejsze domyślne. Sprzątniejsze układy, mniej obejść i responsywna kontrola upieczona prosto w budownicę. To jest zmiana i to przygotowuje Cię do przyszłości projektowania stron internetowych.