Powiem to najpierw: flexbox jest łatwy. Niezależnie od tego, czy wynika to z problemów związanych z wczesną adopcją, czy z tego, że nauczyliśmy się myśleć w kategoriach płynności i bloków, często słyszę od projektantów stron internetowych, którzy uważają, że Flexbox jest skomplikowany w implementacji. Ale powtarzam: flexbox jest łatwy.
Jest jedna sztuczka do zrozumienia Flexboksa, której nauczę, po czym wszystko będzie jasne. Ale najpierw chcę porozmawiać o tym, czym jest flexbox.
Flexbox (lub Moduł elastyczny Box Layout aby nadać jej poprawną nazwę) jest zbiorem właściwości CSS, które łączą się w celu ułożenia treści w responsywny sposób.
Flexbox to pierwsza technika układania CSS, która działa w nowoczesnych sieciach. Można śmiało powiedzieć, że dopóki nie obsługiwano flexboksa, nie było techniki układania, która działałaby dobrze z responsywnym projektowaniem stron internetowych.
Mnóstwo hacków pływało wokoło, jak ustawianie elementów do wyświetlenia: blok inline i pozwalanie na zawijanie. To jednak stanowiło problem dla elastycznych stron, a zwłaszcza brak kontroli i efekt domina zmieniających się elementów. Z tego powodu wiele responsywnych witryn wciąż używa JavaScript do pozycjonowania treści.
Flexbox jest opisywany przez W3C jako przeznaczony do układania elementów interfejsu użytkownika - takich jak elementy menu - nie jest przeznaczony do układania całych stron.
Powodem, dla którego nie jest przeznaczony do układania całych stron, jest to, że Flexbox ma dodatkowy moduł CSS, Moduł układu siatki który jest przeznaczony do układu. Grid Layout jest uważany za najbardziej odpowiednią technikę dla pełnego układu strony. Niestety, obecnie bardzo ograniczone jest wsparcie dla sieci, a przez "ograniczony" rozumiem "brak". Nawet najnowsza wersja Chrome nie obsługuje go bez flag.
Szczęśliwie obsługa przeglądarki dla flexbox jest znacznie bardziej wszechstronna. A ponieważ rozwiązuje wiele problemów związanych z nowoczesnym układem, urządzenie flexbox jest idealnym narzędziem do momentu, w którym siatka zostanie ostatecznie adoptowana.
Flexbox jest idealny do stylizowania komponentów na stronie. Prawdziwa moc flexbox i powód, dla którego działa o wiele lepiej niż inne opcje układu, pochodzi z deklarowania stylów na grupach przedmiotów zamiast pojedynczych elementów.
Jeśli chodzi o układ, rzadko musimy pozycjonować pojedynczy element - jeśli planujemy to zrobić, znacznie lepiej jest użyć pozycjonowania. Flexbox działa najlepiej, gdy kontroluje, w jaki sposób grupy elementów odnoszą się do siebie.
Zawsze projektuj rzeczy, rozważając je w kolejnym szerszym kontekście - krzesło w pokoju, pokój w domu, dom w otoczeniu, środowisko w planie miasta. - Eliel Saarinen
W związku z tym specyfikacja flexbox jest podzielona na dwie części, jeden zestaw właściwości, które odnoszą się do elementu kontenera i jeden zestaw właściwości, które odnoszą się do elementów w nim zawartych.
Obsługa przeglądarki jest zazwyczaj złożonym pytaniem. Stworzony tym bardziej skomplikowany dla flexbox, ponieważ Flexbox ma kilka różnych składni. Wczesne niezdecydowanie, niezależny rozwój przez niektórych dostawców przeglądarek i powtarzający się proces, pozostawiły nam kilka różnych wersji flexbox, które wszystkie muszą być zaspokojone.
Na szczęście, dzięki dodaniu niektórych prefiksów przeglądarki dla starszych przeglądarek, możemy na nich polegać. Według caniuse.com , z obecnych przeglądarek mainstreamowych IE9 będzie stanowić dla nas problem.
Na szczęście, podobnie jak wszystkie CSS, jeśli flexbox się nie powiedzie, nie działa w trybie cichym. Oznacza to, że IE9 po prostu go zignoruje.
Dzięki oszałamiającemu brakowi współpracy między różnymi oddziałami komitetów i korporacji, wdrożenie Flexboksa bardzo blisko rywalizowało z chaosem początku lat '', kiedy każda przeglądarka zaimplementowała każdą pojedynczą nieruchomość w sposób unikalny, a także niepoprawny w tym samym czasie. Dając każdemu korzyść z wątpliwości, trzy implementacje Flexboksa były po prostu iteracyjnym podejściem, które zaowocowało najbardziej pomocnym wspólnym rozwiązaniem.
Istnieją trzy wersje składni Flexbox, o których należy pamiętać: stare, pośrednie i nowe. Różne przeglądarki obsługują różne składnie, na przykład IE10 obsługuje składnię międzyinstytucjonalną.
Podobnie jak przedrostki przeglądarki, piszemy składnię Flexbox od najstarszej do najnowszej, aby najnowsza obsługiwana składnia nadpisała starsze składnie.
Na przykład, piszemy display: flex jak:
display:-webkit-box; /*old prefixed for webkit*/display:-moz-box; /*old prefixed for mozilla*/display:-ms-flexbox; /*inbetween prefixed for ie*/display:-webkit-flex; /*new prefixed for webkit*/display:flex; /*new*/Dla zachowania przejrzystości nie zamierzam zagłębiać się w starsze składnie ani debatować o zaletach preprocesorów, postprocesorów i różnych skryptów konwersji. We wszystkich moich przykładach zamierzam użyć poprawnej, nowej składni.
Jeśli chodzi o kod produkcyjny, używam serii miksów Sass, aby rozszerzyć obsługę Flexbox do starszych przeglądarek.
Jest doskonały Sass mixin tutaj , które można albo użyć, aby zapobiec nadpisywaniu kodu, albo wyodrębnić starszą składnię.
Sekretem Flexboksa jest to, że w ogóle nie jest to pudełko. Do tej pory wszystkie układy w sieci używały kartezjańskiego systemu x i y, aby narysować punkty. Z kolei Flexbox jest wektorem.
Brzmi świetnie, prawda? Flexbox jest wektorem, co oznacza, że definiujemy długość i definiujemy kąt. Możemy zmienić kąt, bez wpływu na długość; i możemy zmienić długość, bez wpływu na kąt.
To nowe podejście oznacza, że część terminologii Flexbox jest początkowo skomplikowana. Na przykład, gdy dopasowujemy elementy do górnej części kontenera flex, używamy flex-start, a nie top, ponieważ jeśli zmienimy orientację, flex-start będzie nadal obowiązywał, ale top nie będzie.
Kiedy zrozumiesz to podejście, znaczna część Flexbox jest demistyfikowana.
Składnia Flexboksa podzielona jest na dwie grupy: właściwości kontrolujące kontener i właściwości kontrolujące bezpośrednich potomków kontenera. Ten pierwszy jest najbardziej użyteczny, więc zacznijmy od tego.
Powiedzmy, że chcemy rozdzielić elementy w bloku. Chcemy, aby były rozmieszczone równomiernie. Korzystanie z flexbox jest naprawdę łatwe. Pierwszą rzeczą, jakiej potrzebujemy, jest kilka znaczników do wypróbowania tego:
Flexbox Layout To jest prosta strona HTML , z domowym div, który zawiera pięć pokojowych divów, z których każdy ma klasę identyfikującą ich funkcję, kuchnię, ubikację, salon i sypialnię.
To, co mamy zamiar zrobić, to ustawić dom jako pojemnik Flexbox. Wszelkie właściwości flexbox, które ustawimy w domu, zostaną następnie zastosowane do jego dzieci ( pomieszczenia s).
Aby rozmieścić pomieszczenia , musimy najpierw zadeklarować dom jako pojemnik flexbox, a następnie powiedzieć, w jaki sposób chcemy ułożyć elementy podrzędne.
Aby zadeklarować dom jako kontener Flexbox, używamy następującego kodu:
.house {background:#FF5651;display:flex;}I to wszystko. Stworzyliśmy elastyczne pudełko. Wszystko, co musimy teraz zrobić, to powiedzieć flexboxowi, jak rozmieścić pomieszczenia . Możemy to zrobić za pomocą właściwości justify-content .
justify-content ma pięć możliwych wartości: centrum, flex-start, flex-end, space-around i space-between. Wyśrodkują elementy, wyrównują je do początku (który jest albo górny albo lewy, jak omówimy poniżej), koniec (który jest albo dolny, albo prawy), rozdziela je równym odstępem wokół każdego elementu lub równe odstępy między poszczególnymi pozycjami.
Użyjemy przestrzeni wokół:
.house {background:#FF5651;display:flex;justify-content: space-around;}Oto wersja demonstracyjna . Zwróć uwagę, jak jest podwójna przestrzeń między przedmiotami, tak jak na dwóch zewnętrznych krawędziach? To dlatego, że każdy przedmiot ma to samo miejsce po lewej i po prawej stronie. Gdybyśmy zamiast tego używali spacji, nie byłoby miejsca na krawędziach.
Nie jestem pewien co do ciebie, ale umywalnia w moim domu jest trochę mniejsza niż salon, i chociaż mam małą kuchnię, chciałbym znacznie większy. Zróbmy kilka dodatków do naszego kodu, aby to odzwierciedlić:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Jak widać w ten przykład nasze pokoje są równomiernie rozmieszczone. Mimo że zmieniliśmy rozmiar. Flexbox jest genialny w porządkowaniu treści.
Jak wspomniano powyżej, jednym z powodów, dla których Flexbox działa tak dobrze dla projektantów, jest to, że jest on opisany jako wektor. Obecnie flexbox obsługuje tylko cztery kąty: 0, 90, 180 i 270 stopni. Więc o wiele łatwiej jest myśleć o nich jako o osi.
Aby zmienić oś, używamy właściwości kierunku gięcia , która ma cztery możliwe wartości: wiersz (domyślnie - jak widać w powyższych przykładach, nasze pokoje są rozmieszczone od lewej do prawej), wiersz-wstecz, kolumna i kolumna-wstecz.
Jeśli zmienimy kierunek flex na kolumnę, zobaczysz w tym demo że pokoje są teraz ułożone pionowo, od góry do dołu:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Jestem pewien, że możesz zgadywać, że odwrócenie wiersza i odwrócenie kolumny odwraca kolejność elementów w twoim giętkim pojemniku.
W ostatnim przykładzie zauważysz, że podczas gdy dom rozciąga się na całej powierzchni ekranu, rozciąga się do pełnej wysokości, nawet gdy jest ustawiony na flex-direction: column.
Aby dobrze bawić się z układem współrzędnych opartym na kartezjańskim CSS, kontener flexbox jest traktowany jako element blokowy.
Podobnie jak wyświetlacz: blok ma wyświetlacz towarzyszący : blok inline, więc do wyświetlenia: flex wyświetla: inline-flex.
inline-flex jest obecnie najbardziej przydatny, jeśli upuszczasz elementy flexbox do istniejącego layoutu i potrzebujesz go do gry z pływającymi elementami i pozycjonowanymi elementami.
Jak widzieliśmy, flexbox nie ma nic przeciwko temu, czy układa się w poziomie czy w pionie, niezależnie od tego, który kierunek wybierzesz, jest to podstawowa oś Flexbox.
Ale flexbox pozwala nam również kontrolować pozycję wzdłuż przeciwnej osi pomocniczej.
Pozycja na osi pomocniczej jest kontrolowana przez właściwość align-items ; ma pięć możliwych wartości: linia bazowa, centrum, flex-end, flex-start i stretch.
linia podstawowa będzie zwykle najbardziej użyteczną opcją. Zapewnia to wyrównanie linii bazowych tekstu. Aby to przetestować, musimy wprowadzić pewne modyfikacje do naszego pliku HTML:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomZobaczysz, że dodałem trochę tekstu i zaimportowałem go, a następnie zastosowałem czcionkę Google. Zmieniłem również rozmiar czcionki w kuchni i umywalni, więc istnieje wyraźne rozróżnienie.
Gdy ustawimy właściwość align-items na wartość bazową , zobaczysz w tym demo że linia bazowa tekstu pasuje do siebie.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}align-items: center centruje wyrównuje, pionowo (jeśli flex-kierunek: wiersz, flex-kierunek: wiersz-reverse ) lub poziomo (jeśli flex-direction: kolumna lub flex-direction: kolumna-reverse ). Oto wersja demonstracyjna.
align-items: flex-start wyrównuje do góry i elementy wyrównania: flex-end wyrównuje się do dołu (jeśli flex: kierunek lub flex: direction-row ) lub w lewo i w prawo (jeśli flex-direction: kolumna lub flex-direction: column-reverse ). Oto wersja demonstracyjna.
stretch, to kolejna bardzo użyteczna opcja. stretch zmieni rozmiar elementów, tak aby każdy z nich był tej samej wysokości (będą rosnąć, a nie kurczą się). Oto wersja demonstracyjna.
W naszych innych przykładach wyraźnie ustawiliśmy wysokość elementów, która wystarczy, aby zastąpić flexbox, aby zobaczyć elementy wyrównania: rozciąganie działa poprawnie, musisz usunąć wysokość ze wszystkich klas z wyjątkiem jednej.
Do tej pory używaliśmy flexbox do elementów układu, aby zmieniać rozmiar w przestrzeni, ale co się dzieje, gdy zawartość przedmiotów jest zbyt duża, aby zmieścić się w jednej linii?
Aby to pokazać, zwiększę rozmiar moich pokoi:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomOto jest jak to wygląda teraz.
Jeśli zmniejszysz okno przeglądarki, zobaczysz, że zawartość zostanie odcięta, ponieważ nie ma na to miejsca. Szczęśliwie flexbox definiuje właściwość flex-wrap dla tej właśnie możliwości, która ma trzy możliwe wartości: no-wrap (domyślnie), wrap i wrap-reverse.
Zawijanie powoduje, że wszystkie elementy, które rozciągają się poza pojemnik, zawijają się na kolejną linię, podobnie jak linia zawijanych tekstów.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Jeśli zgniotasz swoją przeglądarkę, zobaczysz w tym demo elementy są teraz zawijane na nowe linie. Zwróć uwagę, że elementy wyrównania: właściwość podstawowa jest nadal stosowana? Rzeczywistą mocą Flexboksa jest łączenie jego właściwości.
Jedną ważną koncepcją, którą omówię później, jest to, że flex-wrap: wrap-reverse nie odwraca kolejności elementów, powoduje, że wszelkie elementy, które sięgają poza kontener, zawijają się na poprzednią linię, jak widać w tym demo .
Podobnie jak wiele właściwości CSS, niektóre właściwości modułu Flexbox mają skrócone wersje, które są bardziej konsekwentnie implementowane przez producentów przeglądarek.
Własność flex-flow jest skrótem dla właściwości flex-direction i flex-wrap . Zamiast więc pisać:
flex-direction:row-reverse;flex-wrap:wrap;Możemy użyć skrótu:
flex-flow:row-reverse wrap;Powyżej użyliśmy właściwości align-items, aby wyrównać elementy do elementów podstawowych, pozycji i rozciągania. Jak widać w ostatnim przykładzie, nadal występuje, ale występuje on w linii po linii.
Kiedy nasze produkty są zapakowane, mamy opcję ustawienia sposobu ich układania na osi pomocniczej, jeśli pojemnik jest większy niż wymagany.
Jeśli ustawimy minimalną wysokość naszego domu na 1200px, nasz układ wygląda tak .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}Możemy teraz użyć właściwości align-content, aby rozmieścić elementy na całej osi pomocniczej.
Właściwość align-content ma sześć ustawień: centrum, flex-end, flex-start, space-around, space-between i stretch. Wartości te dają takie same wyniki, jak w innych miejscach: centrowanie, wyrównanie do jednego końca, równomierne rozłożenie lub rozciąganie.
Oto wersja demonstracyjna z właściwością ustawioną na przestrzeń kosmiczną.
Do tej pory wszystkie właściwości, które oglądaliśmy, zostały ustawione na elemencie kontenera. Aby dostroić elementy, Flexbox zapewnia nam również szereg właściwości, które można ustawić dla poszczególnych przedmiotów.
Aby to wyjaśnić, usuńmy część naszego kodu:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomOto jest jak to wygląda.
Pierwszą właściwością item flexbox jest myląco określona właściwość flex . flex jest wartością właściwości display na kontenerze, ale jest także właściwością samą w sobie.
Właściwość flex jest skrótowa dla właściwości flex-grow, flex-shrink i flex- base. Rolą tych właściwości jest rozciąganie lub przycinanie rozmiaru zawartości, tak aby całkowicie wypełniała przestrzeń.
Właściwość flex-grow określa elementy, które można powiększyć, jeśli jest to wymagane, tak aby elementy wypełniały w pełni szerokość (dla kierunku flex: wiersz ) i wysokość (dla kierunku flex: kolumna ).
Właściwość flex-grow przyjmuje współczynnik. Jeśli więc ustawimy właściwość flex-grow na 1, wszystkie nasze produkty będą miały ten sam rozmiar co możesz zobaczyć tutaj .
.room {background:#00AAF2;height:90px;flex-grow:1;}Oprócz równej wielkości możemy również ustawić różne współczynniki. Nadal chcę, żeby moja kuchnia była większa niż moja umywalnia, więc naprawmy to w tym demo .
.kitchen {height:300px;flex-grow:2;}flex-shrink działa dokładnie tak samo, jak flex-grow, z tą różnicą, że w razie potrzeby zmniejsza przedmiot, zamiast go rozszerzać.
Jeśli zmienisz rozmiar przeglądarki, zobaczysz, że w różnych rozmiarach moja kuchnia nie jest dokładnie dwa razy większa niż szerokość drugiego pokoju . Wynika to z własności elastycznej podstawy .
Flex-basis określa, w jaki sposób obliczane są właściwości flex-grow i flex-shrink . Ma 2 wartości: auto (domyślnie) i 0.
Jeśli ustawione na 0, brany jest pod uwagę cały przedmiot. Po ustawieniu na auto zmienia się wielkość obramowania wokół zawartości elementu. Innymi słowy, 0 ignoruje rozmiar zawartości przedmiotu podczas obliczania, a auto bierze go pod uwagę. Jest jeden poręczny schemat dostarczone przez W3C, który to wyjaśnia.
Oto wersja demonstracyjna co się stanie, gdy ustawię flex-basis: 0 w powyższym przykładzie.
flex-basis: 0 jest szczególnie użyteczne, jeśli chcesz rozmieścić elementy równomiernie, niezależnie od ich zawartości.
Jak wspomniano powyżej, właściwość flex jest skrótem dla tych właściwości, a przekonasz się, że jest to najbardziej niezawodny sposób ustawiania tych wartości.
Kolejność wartości to flex-grow, flex-shrink, flex-basis. Tak więc, aby ustawić wartość wzrostu 2, wartość zmniejszania 1 i 0, użyjesz:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}Jedną z najlepszych cech flexbox jest możliwość zmiany kolejności elementów bez wpływu na znaczniki; jest to szczególnie przydatne w przypadku dostępności, ponieważ pozwala nam odpowiednio kodować znaczniki, a następnie wyświetlać je optymalnie.
W tym celu używamy właściwości zamówienia przedmiotu.
Patrząc na nasz przykład, umywalnia znajduje się tuż obok kuchni. Wolałbym, żeby to było obok sypialni, więc mogę wskoczyć prosto w prysznic poranka, więc ruszajmy. Jest to obecnie druga pozycja, chcemy, aby była trzecia. Dlatego odpowiednio ustawiamy właściwość zamówienia w tym demo .
.washroom {height:60px;order:2;}Zobacz, jak przeskoczył aż do końca rzędu? Jest obok sypialni, ale nie w tym, jak zamierzaliśmy. Jest to poważny problem w flexboksie, ponieważ wielu programistów (włączając mnie) początkowo oczekuje , że zamówienie będzie działało jak tablica.
zamówienie faktycznie działa jak indeks z CSS , co oznacza, że jeśli nie ustawisz bezpośrednio zamówienia dla elementu, zakłada się, że jest on mniejszy w kolejności niż element, dla którego wartość została jawnie ustawiona.
Chcemy, aby pomieszczenie sanitarne zamieniło się z salonem, więc w tym demo jedynymi innymi przedmiotami, które wymagają zamówienia, są sypialnia .
.washroom {height:60px;order:2;}.bedroom {order:3;}Zwróć uwagę, jak obie sypialnie mają ten sam numer zamówienia? W takich przypadkach przeglądarka powróci do kolejności DOM.
Ostateczna właściwość elementu to self-self. Służy do zmiany wyrównania elementu na osi pomocniczej. align-items służy do wyrównania wszystkich elementów, a ta właściwość daje możliwość rezygnacji z tego ustawienia pełnego.
Pobiera te same pięć wartości, co odpowiednia właściwość pojemnika: linia bazowa, centrum, flex-end, flex-start i stretch.
Oto wersja demonstracyjna z wyrównanej toalety.
.washroom {height:60px;order:2;align-self:flex-end;}Flexbox to potężna opcja do układania treści. Chociaż nie jest to przeznaczone do układania całych stron, jego doskonała obsługa Grid Layout sprawia, że jest to świetna opcja, szczególnie w przypadku witryn mobilnych.
Aby to zademonstrować, utworzymy prostą stronę, która wykorzystuje niektóre z technik opisanych powyżej.
Najpierw jest nasz marż i kilka podstawowych stylów strony.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Tak jak możesz zobaczyć , Mam element div ze stroną id . Na stronie wewnętrznej mam nieuporządkowaną listę wiadomości. Po wiadomościach mam nagłówek, który znajduje się poniżej treści wiadomości z korzyścią dla ułatwień dostępu. Wreszcie mam stopkę.
Pierwszą rzeczą, którą chcę zrobić, jest przeniesienie nagłówka na górę strony. Aby to zrobić, ustawimy stronę jako kontener Flexbox. Następnie ustawimy kierunek na kolumnę. Następnie przypisz zamówienie do każdego elementu potomnego strony.
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}Następnym krokiem jest ułożenie nagłówka. Elementy dziecięce wewnątrz kontenerów Flexbox mogą być samodzielnymi pojemnikami flexbox, więc możemy używać Flexbox do równomiernego rozłożenia elementów nagłówka .
Ustawmy nagłówek jako pojemnik flexbox, a następnie spuśćmy zawartość równo, bez dodatkowego dopełniania po bokach, a na koniec sprawdźmy, czy elementy menu znajdują się na tej samej linii bazowej co logo.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Nasze artykuły informacyjne będą zastępcze dla polecanych artykułów, więc muszą mieć duży rozmiar, aby zrobić miejsce na tekst i obraz lub film. Więc potrzebujemy ich do zawijania.
Ustawmy dział newsów na pojemnik flexbox. Następnie podajmy minimalne wymiary i kolory, abyśmy mogli je wyraźnie zobaczyć.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Teraz musimy ustawić kontener wiadomości, aby go zawijać, a newsItem s rozwinąć, aby wypełnić dostępne miejsce.
#news {order:2;display:flex;flex-flow:row wrap;}Wyzwanie, które mamy teraz, polega na tym, że kiedy wiadomości nie są równomiernie rozmieszczone, największy element (G) znajduje się na samym dole. W większości witryn chcemy zapewnić największą ilość miejsca na najwyższą zawartość. Możemy to naprawić, ustawiając wrap na wrap-reverse.
#news {order:2;display:flex;flex-flow:row wrap-reverse;}To ponownie zamawia przedmioty, ale czytając od góry po lewej, są teraz nieczynne. Musimy więc odwrócić kolejność, ustawiając kierunek odwrócenia wiersza.
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}Oznacza to, że pozycje są porządkowane w kolejności od lewej do prawej, od góry do dołu; z większymi przedmiotami zawsze na górze. Ale nie chcę zmieniać kolejności artykułów w moim znaczniku, aby zmusić przedmiot A do pozycji B. Zatem ostatnią rzeczą, którą muszę zrobić, to zmienić kolejność pozycji.
.newsItem:nth-of-type(7) {order:1;}.newsItem:nth-of-type(6) {order:2;}.newsItem:nth-of-type(5) {order:3;}.newsItem:nth-of-type(4) {order:4;}.newsItem:nth-of-type(3) {order:5;}.newsItem:nth-of-type(2) {order:6;}.newsItem:nth-of-type(1) {order:7;}Ostatnim elementem do stylizacji jest stopka. Chcemy to ułożyć, podobnie jak nagłówek, ale ponieważ stopka ma tylko trzy elementy potomne (w porównaniu do czwartej części nagłówka ), ustawimy akapit na dwa razy szersze niż logo, a na liście .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}Działa to świetnie na komputerach, ale zmniejsza swoją przeglądarkę, a zobaczysz, że jest zbyt ciasna na małych urządzeniach. Zmieńmy więc kod tak, aby był ustawiony na kolumny poniżej 600 pikseli i powracał do rzędu powyżej 600 pikseli.
#footer {order:3;display:flex;align-items:baseline;flex-direction:column;padding:2em 0;}#footer > * {flex:1;}#footer > p {flex:2;}@media only screen and (min-width:600px) {#footer {flex-direction:row;padding:0;}#footer > p {margin-right:2em;}}I tam to masz. Nowoczesne podejście do układania treści na stronie internetowej, szeroko obsługiwane i łatwe do wdrożenia.
Moc flexbox polega na tym, że jego właściwości można łączyć w celu uzyskania precyzyjnej kontroli nad naszymi układami, przy użyciu najprostszej możliwej składni.