Jak tworzyć inteligentne układy tylko w CSS za pomocą Flexbox

Flexible box, w skrócie Flexbox, to zestaw właściwości CSS wprowadzony w 2009 roku, aby zapewnić nowy, wyjątkowy system układu. Moduł Flexbox jest identyfikowany jako część trzeciej wersji CSS (CSS3).

Prawdopodobnie używasz już wielu nowych właściwości CSS3, takich jak box-shadow , border-radius , background gradients i tak dalej. Jednak Flexbox jeszcze nie doczekał się powszechnego przyjęcia, na które zasługuje. Może to wynikać ze wszystkich przełomowych zmian, jakie przeszedł przez lata, lub dlatego, że jest tylko częściowo obsługiwany w Internet Explorerze 10, lub po prostu dlatego, że Flexbox to cały ekosystem, podczas gdy poprzednie paradygmaty opierały się głównie na jednym, gotowym do użycia idź właściwości.

Jest super potężny i oferuje szeroki zakres opcji pozwalających uzyskać układy, o których wcześniej można było tylko pomarzyć.

Ten artykuł poprowadzi Cię przez podstawy Flexbox i jak możesz go używać do tworzenia naprawdę fajnych układów, które w innym przypadku wymagałyby skomplikowanych hacków CSS, a nawet JavaScript.

Dlaczego warto korzystać z Flexbox?

Domyślnie elementy HTML na poziomie bloków stosują się do stosu, więc jeśli chcesz wyrównać je w rzędzie, musisz polegać na właściwościach CSS, takich jak float , lub manipulować właściwością display za pomocą ustawień tabelarycznych lub blokowych.

Jeśli zdecydujesz się użyć float (w lewo lub w prawo), musisz w pewnym momencie wyczyścić opakowanie, aby przesunąć je do ostatniego elementu pływającego, w przeciwnym razie przepełnią wszystko, co nastąpi później. Jednak w przypadku float ograniczasz się do porządkowania elementów w poziomie.

Alternatywnie lub dodatkowo możesz manipulować właściwością display , aby spróbować uzyskać pożądany układ! Ale często wydaje się to w najlepszym razie niezgrabne, nie wspominając o nudnym, i często skutkuje dość delikatnym układem, który niekoniecznie będzie renderowany spójnie w różnych przeglądarkach. Takie podejście jest szczególnie nieskuteczne, jeśli celujesz w wiele urządzeń o różnych rozmiarach — co w dzisiejszych czasach prawie zawsze ma miejsce.

Wejdź do Flexboxa!

Dzięki prostej regule zastosowanej do elementu nadrzędnego możesz łatwo kontrolować zachowanie układu wszystkich jego elementów podrzędnych.

Dzięki Flexbox możesz:

• Odwróć kolejność elementów wewnątrz rodzica Flexbox.
• Zawijaj elementy podrzędne w kolumny (liczba kolumn może się różnić w zależności od wzrostu dziecka i rodzica).
• Określ szybkość, z jaką elementy rosną lub kurczą się, gdy zmienia się rozmiar rzutni.
• Kontroluj, czy elementy można zmniejszać, czy nie, niezależnie od określonego typu jednostki szerokości (względnej lub bezwzględnej).
• Zmień kolejność elementów za pomocą CSS (połącz to z zapytaniami o media, a znajdziesz nieograniczone możliwości w swoim przepływie).
• Generuj złożone rozkłady elementów, aby były w równej odległości z przestrzenią wokół lub tylko z odstępem pomiędzy.
• Generuj elementy „renegatów”, które płyną inaczej (każdy po lewej, ale jeden po prawej, góra/dół… to twoja sprawa).
• A co najważniejsze, na dobre unikaj hackowania Clear-Fix!

Rozumiem, że Flexbox może być trudny na początku. Myślę, że łatwiej jest nauczyć się dziesięciu niepowiązanych właściwości CSS niż pięciu z pewną współzależnością. Jednak z obecnymi umiejętnościami CSS i być może niewielką pomocą z tego artykułu, wejdziesz w nowy świat CSS.

Podstawy Flexbox

Wyświetlacz

display jest jedną z najbardziej podstawowych właściwości CSS i jest dość ważna w kontekście Flexbox, ponieważ jest używana do definiowania flex wrappera.

Istnieją dwie możliwe wartości opakowań flex: flex i inline-flex .

Różnica między nimi polega na tym, że display: flex wrapper działa jak element blokowy, podczas gdy display: inline-flex wrapper działa jak blok śródliniowy. Ponadto elementy inline-flex rosną, jeśli nie ma wystarczająco dużo miejsca, aby pomieścić dzieci. Ale poza tymi różnicami zachowanie tych dwóch byłoby takie samo.

Wypróbuj poniższy przykładowy kod, zmniejsz szerokość widocznego obszaru, gdy funkcja inline-flex jest aktywna i… przewijaj.

Zobacz właściwość Pen Flexbox @Toptal - Parent - `display` autorstwa DD (@Diegue) na CodePen.

 .wrapper { display: flex || inline-flex; }

Elastyczny kierunek

Teraz, po zapoznaniu się z pierwszym przykładem, możesz wywnioskować, że domyślnym zachowaniem jest po prostu utworzenie wiersza elementów. Ale jest więcej:

• row (domyślnie): Rozmieszcza elementy od lewej do prawej (ale jeśli RTL jest ustawione, będzie od tyłu).
• row-reverse: odwraca kolejność elementów w dyspozycji wiersza
• kolumna: Układa elementy od góry do dołu
• column-reverse: odwraca kolejność elementów w rozmieszczeniu kolumn

Wskazówka: column i wartości column-reverse mogą być używane do zamiany osi, więc właściwości, które wpłyną na oś poziomą, będą miały wpływ na oś pionową.

Zobacz właściwość Pen Flexbox @Toptal - Parent - `flex-direction` autorstwa DD (@Diegue) w CodePen.

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

Folia elastyczna

Jeśli sprawdzisz pierwszy przykład kodu, zorientujesz się, że elementy podrzędne nie są domyślnie układane w stos w opakowaniu flex. Tutaj w grę wchodzi flex-wrap :

• nowrap (domyślnie): zapobiega zawijaniu elementów w kontenerze flex
• wrap: Zawija elementy w razie potrzeby w wiele wierszy (lub kolumn, w zależności od flex-direction )
• wrap-reverse: Podobnie jak wrap , ale liczba wierszy (lub kolumn) rośnie w przeciwnym kierunku, gdy elementy są zawijane

Zobacz właściwość Pen Flexbox @Toptal - Parent - `flex-wrap` autorstwa DD (@Diegue) na CodePen.

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

Elastyczny przepływ

Możesz połączyć właściwości flex-direction i flex-wrap w jedną właściwość: flex-flow .

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

Uzasadnij treść

Ta właściwość służy do kontrolowania poziomego wyrównania elementów podrzędnych:

• flex-start (domyślnie): Elementy są wyrównane do lewej (podobnie do elementów śródliniowych z text-align: left )
• flex-end: elementy są wyrównane do prawej (podobnie do elementów śródliniowych z text-align: right )
• center: elementy są wyśrodkowane (podobnie do elementów wbudowanych z text-align: center )
• space-around (gdzie zaczyna się magia): Każdy element będzie renderowany z taką samą ilością miejsca wokół każdego elementu. Zwróć uwagę, że odstęp między dwoma kolejnymi elementami podrzędnymi będzie dwukrotnie większy od odstępu między najbardziej zewnętrznymi elementami a bokami opakowania.
• spacja-między: Podobnie jak space-around , z wyjątkiem tego, że elementy będą oddzielone tą samą odległością i nie będzie spacji w pobliżu krawędzi opakowania.

Uwaga: Pamiętaj, że flex-direction , gdy jest ustawiony na column lub column-reverse , zamienia oś. Jeśli jeden z nich jest ustawiony, justify-content wpłynie na wyrównanie w pionie, a nie w poziomie.

Zobacz właściwość Pen Flexbox @Toptal - Parent - `justify-content` autorstwa DD (@Diegue) na CodePen.

Wyrównaj przedmioty

Ta właściwość jest podobna do justify-content ale kontekstem jej efektów są wiersze zamiast samego opakowania:

• flex-start: elementy są wyrównane w pionie do górnej części opakowania.
• flex-end: elementy są wyrównane w pionie do dolnej części opakowania.
• center: elementy są wyśrodkowane pionowo w opakowaniu (nareszcie bezpieczna praktyka, aby to osiągnąć).
• stretch (domyślnie): Wymusza zajęcie przez elementy pełnej wysokości (po zastosowaniu do wiersza) i pełnej szerokości (po zastosowaniu do kolumny) opakowania.
• Linia bazowa: Wyrównuje elementy w pionie do ich rzeczywistych linii bazowych.

Zobacz właściwość Pen Flexbox @Toptal - Parent - `align-items` autorstwa DD (@Diegue) na CodePen.

Wyrównaj zawartość

Ta właściwość jest podobna do justify-content i align-items , ale działa na osi pionowej, a kontekstem jest całe opakowanie (nie wiersz, jak w poprzednim przykładzie). Aby zobaczyć jego efekty, będziesz potrzebować więcej niż jednego wiersza:

• flex-start: Rzędy są wyrównane pionowo do góry (tj. ułożone od góry opakowania).
• flex-end: Rzędy są wyrównane pionowo do dołu (tj. ułożone od dołu opakowania).
• center: Rzędy są wyśrodkowane w opakowaniu w pionie.
• stretch (domyślnie): Ogólnie rzecz biorąc, ta właściwość rozciąga elementy, aby wykorzystać całą pionową wysokość opakowania. Jeśli jednak ustawiłeś określoną wysokość elementów, ta wysokość będzie honorowana, a pozostała pionowa przestrzeń (w tym wierszu, poniżej tego elementu) będzie pusta.
• space-around: Każdy wiersz będzie renderowany z taką samą ilością miejsca wokół siebie w pionie (tj. poniżej i nad nim). Zwróć uwagę, że odstęp między dwoma rzędami będzie zatem dwukrotnie większy niż odstęp między górnym i dolnym rzędem oraz krawędziami opakowania.
• spacja-pomiędzy: Podobnie jak space-around , z wyjątkiem tego, że elementy zostaną oddzielone tą samą odległością i nie będzie spacji na górnej i dolnej krawędzi opakowania.

Zobacz właściwość Pen Flexbox @Toptal - Parent - `align-content` autorstwa DD (@Diegue) na CodePen.

Elastyczny wzrost

Ta właściwość ustawia względną proporcję dostępnej przestrzeni, którą element powinien wykorzystywać. Wartość powinna być liczbą całkowitą, gdzie 0 jest wartością domyślną.

Załóżmy, że masz dwa różne elementy w tym samym opakowaniu elastycznym. Jeśli oba mają wartość flex-grow 1, będą rosły równo, dzieląc dostępną przestrzeń. Ale jeśli jeden ma wartość flex-grow równą 1, a drugi wartość flex-grow równą 2, jak pokazano w poniższym przykładzie, ten z wartością flex-grow równą 2 urośnie, aby zająć dwa razy więcej miejsca niż pierwszy.

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; } 

Zobacz właściwość Pen Flexbox @Toptal - Children - `flex-grow` autorstwa DD (@Diegue) na CodePen.

Elastyczny skurcz

Podobnie do flex-grow , ta właściwość określa, czy element jest „kurczliwy”, czy nie, z wartością całkowitą. Podobnie do flex-grow , flex-shrink określa współczynnik skurczu elastycznego elementu.

Zobacz właściwość Pen Flexbox @Toptal - Children - `flex-shrink` autorstwa DD (@Diegue) na CodePen.

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

Elastyczna podstawa

Ta właściwość służy do definiowania początkowego rozmiaru elementu przed rozmieszczeniem dostępnej przestrzeni i odpowiednim dostosowaniem elementów.

Podpowiedź: flex-basis nie obsługuje funkcji calc() i box-sizing: border-box w każdej przeglądarce, więc zalecam używanie width , jeśli potrzebujesz użyć jednej z tych (pamiętaj, że będziesz musiał również ustawić flex-basis: auto; ).

Zobacz właściwość Pen Flexbox @Toptal - Children - `flex-basis` autorstwa DD (@Diegue) na CodePen.

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

Przewód

Możesz połączyć właściwości flex-grow , flex-shrink i flex-basis w jedną właściwość: flex w następujący sposób:

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

Wskazówka: Jeśli planujesz używać flex , upewnij się, że zdefiniowałeś każdą pojedynczą wartość (nawet jeśli chcesz użyć wartości domyślnych), ponieważ niektóre przeglądarki mogą ich nie rozpoznać (częsty błąd jest związany z brakiem zdefiniowania wartości flex-grow ).

Wyrównaj siebie

Ta właściwość jest podobna do align-items ale efekt jest stosowany indywidualnie do każdego elementu. Możliwe wartości to:

• flex-start: pionowo wyrównuje element do góry opakowania.
• flex-end: pionowo wyrównuje element do dolnej części opakowania.
• center: Pionowo centruje element w opakowaniu (nareszcie prosty sposób na osiągnięcie tego!).
• stretch (domyślnie): Rozciąga element tak, aby zajmował pełną wysokość opakowania (po zastosowaniu do wiersza) lub pełną szerokość opakowania (po zastosowaniu do kolumny).
• linia bazowa: Wyrównuje elementy zgodnie z ich rzeczywistymi liniami bazowymi.

Zobacz właściwość Pen Flexbox @Toptal - Children - `align-self` autorstwa DD (@Diegue) na CodePen.

Zamówienie

Jedną z najlepszych rzeczy zawartych w Flexboxie jest możliwość zmiany kolejności elementów (za pomocą właściwości order ) bez konieczności modyfikowania DOM lub używania JavaScript. Sposób działania właściwości order jest bardzo prosty. W podobny sposób, w jaki z-index kontroluje kolejność renderowania elementów, order kontroluje kolejność, w jakiej elementy są umieszczane w opakowaniu; oznacza to, że elementy o niższej wartości order (która może być nawet ujemna, nawiasem mówiąc) są pozycjonowane przed tymi o wartości wyższego order .

Zobacz właściwość Pen Flexbox @Toptal - Children - `order` by DD (@Diegue) na CodePen.

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

Wszystko razem: przykładowe zastosowania Flexbox

Jeśli chodzi o projektowanie układów, Flexbox uwalnia świat możliwości. Poniżej znajdziesz przykładowe zastosowania właściwości Flexbox.

Komponent wyrównania w pionie

Dzięki Flexbox możesz wyrównać wszystko w pionie, w tym wiele elementów jednocześnie. Bez Flexbox musiałeś użyć pozycjonowania lub technik tabelarycznych, które wymagały od nas stworzenia jednego dziecka zawierającego wiele elementów. Ale dzięki Flexbox możesz zostawić te żmudne i delikatne techniki za sobą i po prostu zdefiniować kilka właściwości w opakowaniu i to wszystko, niezależnie od tego, ile razy zmienia się zawartość wewnątrz kontenera lub rodzaj zmiany!

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ } 

Zobacz Pen Flexbox @Toptal - Prawdziwe zastosowania, które możemy dać - Wyrównanie w pionie autorstwa DD (@Diegue) na CodePen.

Układ pół/pół

Układ „połowa/połowa” to układ o pełnej wysokości z dwiema kolumnami, każda z treścią wyśrodkowaną w pionie. Jest zwykle implementowany „nad zakładką” (tj. zanim użytkownicy przewinęli się w dół po załadowaniu strony).

Używając bardziej tradycyjnych technik, możesz stworzyć ten układ z elementami pływającymi (o szerokości 50% każdy), usuwając pływaki w wrapperze („clearfix” :before i :after , overflow: hidden , lub zwariowany <div> z clear: both; w końcu). Jest to jednak dużo pracy, a wynik nie jest tak stabilny, jak zapewnia Flexbox.

W poniższym fragmencie kodu zobaczysz, jak łatwo jest ustawić układ, a także jak dzieci stają się również opakowaniami Flexbox, ponieważ wszystko jest również wyrównane w pionie.

Opakowanie zewnętrzne:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

Obwoluty wewnętrzne:

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ } 

Zobacz Pen Flexbox @Toptal - Prawdziwe zastosowania, które możemy dać - sekcję Half-Bleed autorstwa DD (@Diegue) na CodePen.

Przyciski paska nawigacyjnego o pełnej szerokości

Pasek nawigacyjny o pełnej szerokości rozkłada równomiernie przestrzeń w tym samym rzędzie elementów paska nawigacyjnego, niezależnie od liczby elementów.

W poniższym przykładzie znajduje się również kilka ikonicznych przycisków bez tego zachowania, co pokazuje, że można je połączyć w dowolny sposób. Bez Flexbox osiągnięcie tego rodzaju układów wymagałoby kodu JavaScript do obliczenia dostępnej przestrzeni, a następnie jej programowego rozmieszczenia w zależności od tego, które przyciski obejmują, a które nie.

Flexbox to znacznie ułatwia.

Właściwości opakowania:

 .navbar { display: flex; }

Łączenie właściwości podrzędnych:

 .navbar-item { flex-grow: 1; /* They will grow */ }

Nieobejmujące właściwości podrzędne:

 .navbar-other { flex-grow: 0; // They won't grow } 

Zobacz Pen Flexbox @Toptal - Prawdziwe zastosowania, które możemy dać - Pasek nawigacyjny przycisków z pełnym spadem autorstwa DD (@Diegue) na CodePen.

Blurby

Ile razy musiałeś zaimplementować zestaw pól informacyjnych z ikonami i tekstem w różnych projektach?

Ta dystrybucja elementów jest głównie przydatna w marketingu cyfrowym, ale może mieć inne zastosowania w tworzeniu oprogramowania. Dzięki możliwościom Flexbox możesz ustawić rodzaj siatki, a także wyrównać elementy niezależnie od tego, ile ich jest.

Właściwości opakowania:

 .wrapper { display: flex; flex-wrap: wrap; }

Właściwości dziecka:

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

W przypadku okien widocznych na tablety i urządzenia mobilne szerokość waha się od 50% do 100%.

Zobacz Pen Flexbox @Toptal - Prawdziwe zastosowania, które możemy dać - Blurbs autorstwa DD (@Diegue) na CodePen.

Zwiększanie zgodności z różnymi przeglądarkami

Składnia Flexbox zmieniała się wielokrotnie w różnych wersjach przeglądarek. Może to stanowić problem podczas implementacji układu za pomocą Flexbox i prób obsługi starszych przeglądarek internetowych, zwłaszcza starszych wersji Internet Explorera.

Na szczęście w Flexbugs, które jest świetnym zasobem, wymieniono wiele technik i obejść, które pozwolą na działanie kodu w najszerszej gamie przeglądarek internetowych. Jeśli będziesz śledzić informacje w tej witrynie, uzyskasz lepsze, spójne wyniki w różnych przeglądarkach internetowych.

Szczególnie przydatne w tym zakresie są zadania prefiksowe. Aby zautomatyzować prefiksy reguł CSS, możesz wybrać jedno z następujących narzędzi:

Rubin:

• Szyny z autoprefiksem
• Autoprefiks pośrednika

Node.js:

• Autoprefiks postCSS
• Autoprefiks Grunta
• Autoprefiks Gulp

Zacznij tworzyć inteligentne układy

Flexbox to świetne narzędzie do przyspieszania, dopracowywania i skalowania naszej pracy. Limit leży tylko w wyobraźni dewelopera.

Jeśli potrzebujesz pomocy wizualnej, aby zaplanować następny układ, możesz wypróbować ten zgrabny plac zabaw:

Zobacz Pen Flexbox @Toptal - plac zabaw Flexbox autorstwa DD (@Diegue) na CodePen.

Otwórz go w nowym oknie.

Wraz z rosnącą popularnością nowoczesnych przeglądarek internetowych przez większość użytkowników, korzystanie z Flexbox pozwoli Ci łatwo tworzyć niesamowite układy bez konieczności zagłębiania się w niechlujny kod JavaScript lub tworzenia kludy CSS.