Praktyczne zastosowanie FlexBoxa. Metoda pozycjonowania elementów Flexbox Co to są flexy CSS

07.12.2023 -

Witaj, Habr!

Pewnego pięknego wieczoru, nie zapowiadając niczego ciekawego, na naszym czacie pojawiła się propozycja od autora publikacji, którą napisał wiosną 2012 roku, napisania artykułu w formie remake’u, ale z wykorzystaniem FlexBoxa i towarzyszącym mu wyjaśnieniem, co i jak to działa. Po pewnych wątpliwościach zainteresowanie głębszym zrozumieniem specyfikacji nadal zwyciężyło i z radością usiadłem, aby przepisać te same przykłady. Gdy zagłębiliśmy się w ten obszar, wiele niuansów zaczęło się wyjaśniać, co przerodziło się w coś więcej niż tylko przeprojektowanie układów. Ogólnie rzecz biorąc, w tym artykule chcę porozmawiać o tak wspaniałej specyfikacji zwanej „CSS Elastic Box Layout Module” i pokazać niektóre z jej interesujących funkcji oraz przykłady zastosowania. Serdecznie zapraszam wszystkich zainteresowanych do wzięcia udziału w hackowaniu.

Chciałbym zwrócić Twoją uwagę na to, że aby stworzyć układ na FlexBoxie, programista będzie potrzebował pewnego stopnia adaptacji. Na własnym przykładzie czułem, że wieloletnie doświadczenie płatało okrutny żart. FlexBox wymaga nieco innego sposobu myślenia o układaniu elementów w przepływie.

Część techniczna

Zanim przejdziemy do jakichkolwiek przykładów, warto zrozumieć, jakie właściwości uwzględnia ta specyfikacja i jak działają. Ponieważ niektóre z nich są początkowo niezbyt jasne, a niektóre są otoczone mitami, które nie mają nic wspólnego z rzeczywistością.

Więc. W FlexBoxie występują dwa główne typy elementów: Flex Container i jego elementy podrzędne – Flex Items. Aby zainicjować kontener, po prostu przypisz go za pomocą css do elementu wyświetlacz: elastyczny; Lub wyświetlacz: inline-flex;. Różnica pomiędzy flexem a inline-flexem polega jedynie na zasadzie interakcji z elementami otaczającymi kontener, podobnie jak display: block; i display: odpowiednio inline-block;.

Wewnątrz elastycznego pojemnika tworzone są dwie osie, oś główna i oś prostopadła lub poprzeczna. Przeważnie elementy elastyczne układane są wzdłuż osi głównej, a następnie wzdłuż osi poprzecznej. Domyślnie oś główna jest pozioma i skierowana od lewej do prawej, a oś poprzeczna jest pionowa i skierowana od góry do dołu.

Kierunek osi można kontrolować za pomocą właściwości css kierunek flex. Ta właściwość przyjmuje wiele wartości:
wiersz(domyślnie): Główna oś elastycznego kontenera ma tę samą orientację, co oś wbudowana w bieżącym trybie kierunku wiersza. Początek (main-start) i koniec (main-end) kierunku osi głównej odpowiadają początkowi (inline-start) i końcowi (inline-end) osi inline.
odwrotność wiersza: Wszystko jest takie samo jak w rzędzie, tylko główny początek i główny koniec są zamienione miejscami.
kolumna: tak samo jak rząd, tylko teraz oś główna skierowana jest z góry na dół.
odwrotna kolumna: tak samo jak w przypadku wiersza odwrotnego, tylko oś główna jest skierowana z dołu do góry.
Możesz zobaczyć, jak to działa w przykładzie na jsfiddle.

Domyślnie wszystkie elementy elastyczne w kontenerze są umieszczane w jednej linii, nawet jeśli nie mieszczą się w kontenerze, wychodzą poza jego granice. To zachowanie jest przełączane za pomocą właściwości owinięcie elastyczne. Ta właściwość ma trzy stany:
teraz rapuj(domyślnie): Elementy Flex są ułożone w jednej linii od lewej do prawej.
zawinąć: elementy elastyczne budowane są w trybie wieloliniowym, przenoszenie odbywa się w kierunku osi poprzecznej, z góry na dół.
zawijanie-odwracanie: to samo co wrap, ale zawija od dołu do góry.
Spójrzmy na przykład.

Dla wygody istnieje dodatkowa właściwość elastyczny przepływ, w którym możesz jednocześnie określić kierunek flex I owinięcie elastyczne. To wygląda tak: elastyczny przepływ:

Elementy w kontenerze można wyrównać za pomocą właściwości uzasadnij-treść wzdłuż głównej osi. Właściwość ta przyjmuje aż pięć różnych wartości.
elastyczny start(domyślnie): Elementy elastyczne są wyrównane do początku osi głównej.
końcówka elastyczna: elementy są wyrównane do końca głównej osi
Centrum: Elementy są wyrównane do środka głównej osi
przestrzeń pomiędzy: elementy zajmują całą dostępną szerokość w kontenerze, skrajne elementy są ściśle dociśnięte do krawędzi pojemnika, a wolna przestrzeń jest równomiernie rozłożona pomiędzy elementami.
przestrzeń wokół: Elastyczne elementy są ułożone tak, aby wolna przestrzeń była równomiernie rozłożona pomiędzy elementami. Warto jednak zaznaczyć, że odstęp pomiędzy krawędzią pojemnika a elementami zewnętrznymi będzie o połowę mniejszy niż odstęp pomiędzy elementami w środku rzędu.
Można oczywiście kliknąć na przykład działania tej właściwości.

To nie wszystko, mamy także możliwość wyrównywania elementów wzdłuż osi poprzecznej. Stosując właściwość wyrównaj-przedmioty, który również przyjmuje pięć różnych wartości, można osiągnąć ciekawe zachowanie. Ta właściwość umożliwia wyrównanie elementów w rzędzie względem siebie.
elastyczny start: wszystkie elementy są wypychane na początek linii
końcówka elastyczna: elementy są wypychane na koniec linii
Centrum: elementy są wyrównane do środka wiersza
linia bazowa: Elementy są wyrównane do linii bazowej tekstu
rozciągać się(domyślnie): elementy są rozciągane, aby wypełnić całą linię.

Kolejną właściwością podobną do poprzedniej jest wyrównaj zawartość. Jako jedyny odpowiada za wyrównywanie całych linii względem elastycznego pojemnika. Nie będzie to miało żadnego efektu, jeśli elementy elastyczne zajmują jedną linię. Właściwość przyjmuje sześć różnych wartości.
elastyczny start: wszystkie linie są dociśnięte do początku osi poprzecznej
końcówka elastyczna: wszystkie linie są dociśnięte do końca osi poprzecznej
Centrum: Wszystkie linie pakowania są wyrównane do środka osi poprzecznej
przestrzeń pomiędzy: linie rozłożone są od górnej krawędzi do dołu, pozostawiając wolną przestrzeń pomiędzy liniami, natomiast skrajne linie dociskane są do krawędzi pojemnika.
przestrzeń wokół: Linie są rozmieszczone równomiernie w całym kontenerze.
rozciągać się(domyślnie): linie są rozciągane, aby zająć całą dostępną przestrzeń.
W tym przykładzie możesz wypróbować działanie funkcji wyrównania elementów i treści wyrównania. Specjalnie przedstawiłem te dwie właściwości w jednym przykładzie, ponieważ oddziałują one dość ściśle, a każda z nich wykonuje swoje własne zadanie. Zwróć uwagę, co się stanie, gdy elementy zostaną umieszczone w jednej lub wielu liniach.

Ustaliliśmy parametry elastycznego pojemnika, pozostaje tylko ustalić właściwości elastycznych elementów.
Pierwszą właściwością, z którą się zapoznamy, jest zamówienie. Ta właściwość umożliwia zmianę położenia konkretnego elementu w strumieniu. Domyślnie wszystkie elementy elastyczne mają rząd: 0; i są zbudowane w kolejności naturalnego przepływu. Na przykładzie widać, jak zamieniane są elementy, jeśli zostaną do nich zastosowane różne wartości kolejności.

Jedną z głównych właściwości jest podstawa elastyczna. Za pomocą tej właściwości możemy określić podstawową szerokość elementu elastycznego. Wartość domyślna to automatyczny. Ta właściwość jest ściśle związana z elastyczny wzrost I flex-shrink, o czym opowiem nieco później. Akceptuje wartość szerokości w px,%, em i innych jednostkach. Zasadniczo nie jest to ściśle szerokość elementu elastycznego, jest to swego rodzaju punkt wyjścia. Względem tego element się rozciąga lub kurczy. W trybie automatycznym element otrzymuje szerokość bazową w stosunku do zawartości w nim zawartej.

elastyczny wzrost w kilku zasobach ma całkowicie błędny opis. Mówi, że rzekomo ustala stosunek rozmiarów elementów w pojemniku. W rzeczywistości nie jest to prawdą. Ta właściwość określa współczynnik powiększenia elementu, gdy w kontenerze jest wolne miejsce. Domyślnie ta właściwość ma wartość 0. Wyobraźmy sobie, że mamy elastyczny kontener o szerokości 500 pikseli, wewnątrz niego znajdują się dwa elementy elastyczne, każdy o podstawowej szerokości 100 pikseli. Pozostawia to kolejne 300 pikseli wolnego miejsca w kontenerze. Jeśli określimy flex-grow: 2; dla pierwszego elementu i flex-grow: 1; W rezultacie bloki te zajmą całą dostępną szerokość kontenera, szerokość tylko pierwszego bloku będzie wynosić 300px, a drugiego już tylko 200px. Co się stało? Stało się tak, że dostępne 300px wolnego miejsca w kontenerze zostało rozdzielone pomiędzy elementy w stosunku 2:1, +200px dla pierwszego i +100px dla drugiego. Tak właśnie to działa.

Tutaj płynnie przechodzimy do kolejnej podobnej właściwości, a mianowicie flex-shrink. Wartość domyślna to 1. Ustawia również współczynnik zmiany szerokości elementów, tylko w przeciwnym kierunku. Jeśli kontener ma szerokość mniej niż suma podstawowej szerokości elementów, wtedy ta właściwość zaczyna obowiązywać. Na przykład kontener ma szerokość 600 pikseli, a podstawa elastyczności elementów to 300 pikseli. Podaj pierwszy element flex-shrink: 2;, a drugi element flex-shrink: 1;. Teraz zmniejszmy kontener o 300 pikseli. Dlatego suma szerokości elementów jest o 300px większa niż kontenera. Różnica ta rozkłada się w stosunku 2:1, zatem od pierwszego bloku odejmujemy 200 pikseli, a od drugiego 100 pikseli. Nowy rozmiar elementów wynosi odpowiednio 100 i 200 pikseli dla pierwszego i drugiego elementu. Jeżeli ustawimy flex-shrink na 0, to zapobiegniemy kurczeniu się elementu do rozmiaru mniejszego niż jego podstawowa szerokość.

Tak naprawdę jest to bardzo uproszczony opis jak to wszystko działa, żeby ogólna zasada była jasna. Bardziej szczegółowo, jeśli ktoś jest zainteresowany, algorytm jest opisany w specyfikacji.

Wszystkie trzy właściwości można zapisać w formie skróconej za pomocą wyrażenia przewód. To wygląda tak:
przewód: ;
Możemy też napisać jeszcze dwie wersje skrócone, flex:automatyczny; I elastyczność: brak;, co znaczy elastyczny: 1 1 automatyczny; I elastyczny: 0 0 automatyczny; odpowiednio.

Pozostaje ostatnia właściwość elementów elastycznych wyrównać się. Tutaj wszystko jest proste, działa tak samo jak wyrównanie elementów dla kontenera, co pozwala na nadpisanie wyrównania dla konkretnego elementu.

To tyle, mam tego dość! Podaj nam przykłady!

Załatwiliśmy część techniczną, okazała się dość długa, ale trzeba się w to zagłębić. Teraz możemy przejść do praktycznego zastosowania.
Podczas opracowywania tych „pięciu naprawdę przydatnych szablonów responsywnych układów” musieliśmy rozwiązać typowe sytuacje, z którymi programiści często spotykają się. Dzięki flexbox wdrażanie tych rozwiązań staje się łatwiejsze i bardziej elastyczne.
Weźmy ten sam czwarty układ, ponieważ... ma najciekawsze elementy.

Najpierw wyznaczmy główną szerokość strony, wyrównajmy ją do środka i dociśnijmy stopkę do dołu strony. Jak zawsze w ogóle.

HTML ( tło: #ccc; minimalna wysokość: 100%; rodzina czcionek: bezszeryfowa; wyświetlacz: -webkit-flex; wyświetlacz: flex; kierunek flex: kolumna; ) treść ( margines: 0; dopełnienie: 0 15px ; wyświetlacz: -webkit-flex; wyświetlacz: kierunek flex: kolumna; flex: auto; wyświetlacz: -webkit-flex; flex-wrap: szerokość ramki; : 960px; minimalna szerokość: 430px; margines: automatyczny; rozmiar pudełka: obramowanie: 430px kolor: #eee;

Ponieważ określiliśmy flex-grow: 1 dla .main; rozciąga się do pełnej dostępnej wysokości, dociskając w ten sposób stopkę do dołu. Zaletą tego rozwiązania jest to, że stopka może mieć dowolną wysokość.

Teraz umieśćmy logo i menu w nagłówku.
.logo ( rozmiar czcionki: 0; margines: -10px 10px 10px 0; wyświetlacz: flex; flex: brak; wyrównanie elementów: środek; ) .logo:before, .logo:after ( treść: ""; display: block ; ) .logo:przed (tło: #222; szerokość: 50px; wysokość: 50px; margines: 0 10px 0 20px; promień obramowania: 50%; ) .logo:po (tło: #222; szerokość: 90px; wysokość : 30px; ) .nav ( margines: -5px 0 0 -5px; wyświetlacz: -webkit-flex; wyświetlacz: flex; flex-wrap: wrap; ) .nav-itm ( tło: #222; szerokość: 130px; wysokość: 50 pikseli; rozmiar czcionki: 1,5 rem; dekoracja tekstu: brak; wyświetlacz: -webkit-flex; justify-content: center;

Ponieważ nagłówek ma funkcję flex-wrap: wrap; i uzasadnij-treść: odstęp pomiędzy; Logo i menu są rozsiane po różnych stronach nagłówka, a jeśli zabraknie miejsca na menu, elegancko przesunie się pod logo.

Następnie widzimy duży post lub baner, trudno powiedzieć co to konkretnie jest, ale nie o to chodzi. Mamy obraz po prawej stronie i tekst z tytułem po lewej stronie. Osobiście wyznaję zasadę, że wszelkie elementy powinny być jak najbardziej elastyczne, niezależnie od tego, czy układ jest adaptacyjny, czy statyczny. Tak więc w tym poście mamy boczny pasek, w którym znajduje się obrazek; ściśle rzecz biorąc, nie jesteśmy w stanie dokładnie określić, jakiej szerokości potrzebujemy, ponieważ dziś mamy duży obraz, jutro mały i nie chcemy przerabiać elementu. za każdym razem od zera. Oznacza to, że pasek boczny zajmie potrzebne mu miejsce, a reszta przestrzeni zajmie zawartość. Zróbmy to:

Pole (rozmiar czcionki: 1,25 rem; wysokość linii: 1,5; styl czcionki: kursywa; margines: 0 0 40px -50px; wyświetlacz: -webkit-flex; wyświetlacz: flex; flex-wrap: wrap; justify-content: środek; .box-base ( margines-lewy: 50px; flex: 1 0 430px; ) .box-side ( margines-lewy: 50px; flex: brak; ) .box-img ( maksymalna szerokość: 100%; wysokość : automatyczny)

Jak widać dla .box-base, gdzie mamy tytuł i tekst, określiłem szerokość bazową za pomocą elastyczna podstawa: 430px;, a także zabronione użycie skurczu bloku flex-shrink: 0;. Przy tej manipulacji powiedzieliśmy, że szerokość treści nie może być mniejsza niż 430 pikseli. A biorąc pod uwagę fakt, że dla .box wskazuję owinięcie elastyczne: owinięcie; w momencie, gdy pasek boczny i treść nie mieszczą się w kontenerze.box, pasek boczny automatycznie znajdzie się pod zawartością. A to wszystko bez aplikacji @głoska bezdźwięczna! Myślę, że to jest naprawdę bardzo fajne.

Pozostaje nam treść składająca się z trzech kolumn. Istnieje kilka rozwiązań tego problemu, pokażę jedno z nich; w pozostałych układach istnieje inna opcja.
Stwórzmy kontener, nazwijmy go .content i skonfigurujmy.
.content ( margines na dole: 30 pikseli; wyświetlacz: -webkit-flex; wyświetlacz: flex; flex-wrap: wrap; )

Kontener ma trzy kolumny: .banners, .posts, .comments
.banners ( flex: 1 1 200px; ) .posts ( margines: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( margines: 0 0 30px 30px; flex: 1 1 200px; )

Kolumnom nadałem szerokość bazową 200px, żeby nie zawężały się za bardzo, ale byłoby lepiej, gdyby były przesunięte jedna pod drugą w razie potrzeby.

Zgodnie z układem bez @media nie poradzimy sobie z treścią, więc dostosujmy trochę zachowanie kolumn pod kątem szerokości<800px и <600px.
@media ekran i (maks. szerokość: 800 pikseli) ( .banners ( margines-lewy: -30px; wyświetlacz: -webkit-flex; wyświetlacz: flex; podstawa flex: 100%; ) .posts ( margines-lewy: 0; ) ) @media screen i (maks. szerokość: 600px) ( .content ( display: block; ) .banners ( margines: 0; display: block; ) .comments ( margines: 0; ) )

Na tym właśnie polega magia tworzenia układu w programie FlexBox. Kolejne zadanie, które mi się spodobało, to układ 5., konkretnie dotyczy on dostosowania treści.

Widzimy, jak w rozdzielczości pulpitu posty są zbudowane w siatce po trzy w rzędzie. Gdy szerokość widocznego obszaru będzie mniejsza niż 800px, siatka zamienia się w kolumnę z wpisami, w której zdjęcie wpisu jest ułożone naprzemiennie po lewej i prawej stronie treści wpisu. A jeśli szerokość jest mniejsza niż 600 pikseli, zdjęcie w poście jest całkowicie ukryte.
.grid ( display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: spacja-between; ) .grid-itm ( margines-dół: 30px; flex-basis: calc(33,33% - 30px * 2/3); wyświetlacz: -webkit-flex; wyświetlacz: flex-wrap: wrap; ) .grid-img ( margines: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; .grid-title (text-align: center; ) @media screen i (max-width: 800px) ( .grid-itm (flex-wrap: nowrap; flex-basis: 100%; ) grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child(parzyste) .grid-img ( margines: 0 0 0 30px; kolejność: 2; ) .grid-itm:nth-child(parzyste) .grid-img ( margines: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen i (max-width: 600px) ( .grid-img (Nie wyświetla się; ) )

W rzeczywistości jest to tylko niewielka część tego, co można wdrożyć za pomocą FlexBox. Specyfikacja pozwala na budowanie bardzo złożonych układów stron przy użyciu prostego kodu.

Flexbox można słusznie nazwać udaną próbą rozwiązania ogromnej gamy problemów podczas tworzenia układów w CSS. Zanim jednak przejdziemy do jego opisu, dowiedzmy się, co jest nie tak z metodami układu, których obecnie używamy?

Każdy projektant układu zna kilka sposobów wyrównania czegoś w pionie lub stworzenia układu 3-kolumnowego z gumowaną środkową kolumną. Ale przyznajmy, że wszystkie te metody są dość dziwne, wyglądają jak hack, nie są odpowiednie we wszystkich przypadkach, są trudne do zrozumienia i nie działają, jeśli nie zostaną spełnione pewne magiczne warunki, które rozwinęły się w przeszłości.

Stało się tak, ponieważ HTML i CSS rozwijały się ewolucyjnie. Na początku strony internetowe wyglądały jak jednowątkowe dokumenty tekstowe, nieco później dzielenie strony na bloki odbywało się za pomocą tabel, potem modne stało się układanie za pomocą zmiennoprzecinkowych, a po oficjalnej śmierci ie6 zaczęto stosować techniki inline-block również dodano. W rezultacie odziedziczyliśmy wybuchową mieszankę wszystkich tych technik, używanych do tworzenia układów dla 99,9% wszystkich istniejących stron internetowych.

Wieloliniowa organizacja bloków w elastycznym kontenerze.

owinięcie elastyczne

Wszystkie przykłady, które podaliśmy powyżej, zostały zbudowane z uwzględnieniem jednoliniowego (jednokolumnowego) układu bloków. Trzeba powiedzieć, że domyślnie elastyczny kontener zawsze ułoży bloki wewnątrz siebie w jednej linii. Specyfikacja obsługuje jednak także tryb wielowierszowy. Właściwość CSS flex-wrap jest odpowiedzialna za zawartość wielowierszową wewnątrz elastycznego kontenera.

Dostępne wartości owinięcie elastyczne:

teraz rapuj (domyślna wartość): bloki są ułożone w jednej linii od lewej do prawej (w rtl od prawej do lewej)
wrap: klocki ułożone są w kilku poziomych rzędach (jeśli nie mieszczą się w jednym rzędzie). Podążają za sobą od lewej do prawej (w rtl od prawej do lewej)
wrap-reverse: tak samo jak zawinąć, ale bloki są ułożone w odwrotnej kolejności.

flex-flow to wygodny skrót od kierunku flexu + owinięcia flexem

Zasadniczo flex-flow zapewnia możliwość opisania kierunku głównej i wieloliniowej osi poprzecznej w jednej właściwości. Domyślny przepływ elastyczny: wiersz nowrap .

elastyczny przepływ:<‘flex-direction’> || <‘flex-wrap’>

CSS

/* tj. ... */ .my-flex-block( flex-direcrion:kolumna; flex-wrap: wrap; ) /* to jest to samo co... */ .my-flex-block( flex-flow: zawijanie kolumny )

wyrównaj zawartość

Istnieje również właściwośćlay-content, która określa, w jaki sposób powstałe rzędy bloków będą wyrównane w pionie i jak podzielą całą przestrzeń elastycznego kontenera.

Ważny: wyrównanie zawartości działa tylko w trybie wieloliniowym (tj. w przypadku flex-wrap:wrap; lub flex-wrap:wrap-reverse;)

Dostępne wartości wyrównaj zawartość:

Flex-start: rzędy bloków są dociskane do początku elastycznego pojemnika.
flex-end: rzędy bloków dociskane są do końca elastycznego pojemnika
środek: rzędy bloków znajdują się pośrodku elastycznego pojemnika
odstęp pomiędzy: pierwszy rząd bloczków znajduje się na początku elastycznego kontenera, ostatni rząd bloczków na końcu, wszystkie pozostałe rzędy są równomiernie rozmieszczone na pozostałej przestrzeni.
space-around: rzędy bloków są równomiernie rozmieszczone od początku do końca elastycznego kontenera, równomiernie dzieląc całą dostępną przestrzeń.
rozciągać się (domyślna wartość): Rzędy bloków są rozciągnięte, aby zająć całą dostępną przestrzeń.

Właściwości CSS flex-wrap i wyrównanie zawartości powinny być stosowane bezpośrednio do elastycznego kontenera, a nie do jego dzieci.

Demo właściwości wieloliniowych w flex

Reguły CSS dla elementów podrzędnych kontenera elastycznego (bloki elastyczne)

flex-basis – podstawowy rozmiar pojedynczego flex blocka

Ustawia początkowy rozmiar osi głównej bloku elastycznego przed zastosowaniem do niego transformacji opartych na innych współczynnikach elastyczności. Można określić w dowolnych jednostkach długości (px, em,%, ...) lub auto (domyślnie). Jeśli ustawione jako auto, za podstawę przyjmowane są wymiary bloku (szerokość, wysokość), które z kolei mogą zależeć od rozmiaru treści, jeśli nie jest to wyraźnie określone.

flex-grow – „chciwość” pojedynczego flex blocka

Określa, o ile większy może być pojedynczy blok elastyczny niż sąsiednie elementy, jeśli to konieczne. flex-grow akceptuje wartość bezwymiarową (domyślnie 0)

Przykład 1:

Jeśli wszystkie elastyczne pudełka w elastycznym pojemniku mają funkcję flex-grow:1, będą miały ten sam rozmiar
Jeśli jeden z nich ma flex-grow:2 to będzie 2 razy większy od wszystkich pozostałych

Przykład 2:

Jeśli wszystkie elastyczne pudełka w elastycznym pojemniku mają funkcję flex-grow:3, będą miały ten sam rozmiar
Jeśli jeden z nich ma flex-grow:12, to będzie 4 razy większy niż wszystkie pozostałe

Oznacza to, że wartość bezwzględna flex-grow nie określa dokładnej szerokości. Określa stopień jego „chciwości” w stosunku do innych flex blocków na tym samym poziomie.

flex-shrink – współczynnik „ściśliwości” pojedynczego bloczka elastycznego

Określa, jak bardzo blok elastyczny skurczy się względem sąsiednich elementów wewnątrz elastycznego kontenera, jeśli nie będzie wystarczającej ilości wolnego miejsca. Domyślnie 1.

flex – skrót od właściwości flex-grow, flex-shrink i flex-base

flex: brak | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

CSS

/* tj. ... */ .my-flex-block( flex-grow:12; flex-shrink:3; podstawa flex: 30em; ) /* to to samo co... */ .my-flex-block( flex : 12 3 30em )

Demo dla flex-grow, flex-shrink i flex-base

Align-self – ustawienie pojedynczego bloku elastycznego wzdłuż osi poprzecznej.

Umożliwia zastąpienie właściwości „align-items” kontenera elastycznego dla pojedynczego bloku elastycznego.

Dostępne wartości wyrównania (te same 5 opcji co elementy wyrównania)

Flex-start: blok elastyczny jest dociskany do początku osi poprzecznej
koniec elastyczny: blok elastyczny jest dociskany do końca osi poprzecznej
środek: blok elastyczny znajduje się w środku osi poprzecznej
linia bazowa: blok elastyczny jest wyrównany do linii bazowej
rozciągać się (domyślna wartość): Blok elastyczny jest rozciągany, aby zająć całą dostępną przestrzeń wzdłuż osi poprzecznej, biorąc pod uwagę szerokość minimalną/maksymalną, jeśli jest ustawiona.

kolejność – kolejność pojedynczego bloku elastycznego w elastycznym pojemniku.

Domyślnie wszystkie bloki będą następować po sobie w kolejności określonej w kodzie HTML. Kolejność tę można jednak zmienić za pomocą właściwości Order. Jest ona określona jako liczba całkowita i domyślnie wynosi 0.

Wartość kolejności nie określa bezwzględnej pozycji elementu w sekwencji. Określa wagę położenia elementu.

HTML

przedmiot 1

pozycja 2

pozycja 3

pozycja 4

pozycja 5

W tym przypadku bloki będą następować jeden po drugim wzdłuż głównej osi w następującej kolejności: pozycja 5, pozycja 1, pozycja 3, pozycja 4, pozycja 2

Demo do samodzielnego wyrównania i uporządkowania

margines: automatyczny pionowo. Marzenia się spełniają!

Możesz pokochać Flexbox przynajmniej dlatego, że znajome wyrównanie w poziomie za pomocą marginesu: auto działa tutaj również w pionie!

Mój-flex-container ( display: flex; wysokość: 300px; /* Lub cokolwiek */ ) .my-flex-block ( szerokość: 100px; /* Lub cokolwiek */ wysokość: 100px; /* Lub cokolwiek * / margines: auto; /* Magia! Blok jest wyśrodkowany w pionie i poziomie */ )

Rzeczy do zapamiętania

Nie należy używać Flexboksa tam, gdzie nie jest to konieczne.
Definiowanie regionów i zmiana kolejności treści w wielu przypadkach nadal warto uzależnić od struktury strony. Przemyśl to.
Zrozum Flexbox i poznaj podstawy. Dzięki temu znacznie łatwiej osiągnąć oczekiwany efekt.
Nie zapomnij o marginesach. Są one brane pod uwagę przy ustawianiu wyrównania osi. Należy również pamiętać, że marginesy w Flexboksie nie „zapadają się” tak, jak ma to miejsce w przypadku normalnego przepływu.
Wartość zmiennoprzecinkowa bloków elastycznych nie jest brana pod uwagę i nie ma znaczenia. Prawdopodobnie można to w jakiś sposób wykorzystać do płynnej degradacji podczas przełączania na Flexbox.
Flexbox bardzo dobrze nadaje się do układu komponentów sieciowych i poszczególnych części stron internetowych, jednak swojej najlepszej strony nie pokazał przy układaniu podstawowych układów (pozycja artykułu, nagłówek, stopka, pasek nawigacyjny itp.). Jest to nadal kontrowersyjny punkt, ale ten artykuł dość przekonująco pokazuje niedociągnięcia.xanthir.com/blog/b4580

Wreszcie

Myślę, że flexbox oczywiście nie zastąpi wszystkich innych metod układu, ale oczywiście w najbliższej przyszłości zajmie godną niszę w rozwiązywaniu ogromnej liczby zadań. I oczywiście musisz teraz spróbować z nim współpracować. Jeden z kolejnych artykułów poświęcony będzie konkretnym przykładom pracy z układem elastycznym. Subskrybuj nowości ;)

Treść:

Flexbox to nowy sposób układania bloków na stronie. Jest to technologia stworzona specjalnie do układania elementów, w przeciwieństwie do pływaków. Używając Flexbox Z łatwością możesz wyrównywać elementy w poziomie i w pionie, zmieniać kierunek i kolejność wyświetlania elementów, rozciągać bloki na pełną wysokość rodzica, czy przybijać je do dolnej krawędzi.

UPD z dnia 02.02.2017: Zrobiłem wygodną ściągawkę na Flexboksie, zawierającą demonstracje na żywo i opisy ze specyfikacji: Ściągawka Flexbox.

W przykładach używana jest wyłącznie nowa składnia. W chwili pisania tego tekstu są one najbardziej poprawnie wyświetlane w Chrom. Działają częściowo w Firefoksie, ale wcale nie w Safari.

Według caniuse.com, Flexbox nie jest obsługiwany przez IE 8 i 9 oraz Opera Mini, a w innych przeglądarkach nie wszystkie właściwości są obsługiwane i/lub wymagane są przedrostki.

Oznacza to, że technologia ta nie może być obecnie szeroko stosowana, ale nadszedł czas, aby poznać ją lepiej.

Najpierw musisz wiedzieć, że elementy elastyczne są ułożone wzdłuż osi. Domyślnie elementy ułożone są poziomo - wzdłuż główna oś- oś główna.

Należy również o tym pamiętać podczas użytkowania Flexbox float , clear i Vertical-align nie działają w przypadku bloków wewnętrznych, a także właściwości definiujących kolumny w tekście.

Przygotujmy poligon doświadczalny do eksperymentów:

Jeden blok nadrzędny (żółty) i 5 bloków podrzędnych.

Wyświetlacz: elastyczny

A teraz do elementu nadrzędnego dodajemy display: flex; . Wewnętrzne elementy div są ułożone (wzdłuż głównej osi) z kolumnami o tej samej wysokości, niezależnie od zawartości.

wyświetlacz: elastyczny; Sprawia, że wszystkie elementy podrzędne są elastyczne, a nie wbudowane lub blokowe, jak miało to miejsce pierwotnie.

Jeśli blok nadrzędny zawiera obrazy lub tekst bez opakowań, stają się one anonimowymi elementami elastycznymi.

Wyświetl właściwość dla Flexbox może mieć dwa znaczenia:

flex - zachowuje się jak element blokowy. Przy obliczaniu szerokości bloków priorytet ma układ (jeśli bloki nie będą wystarczająco szerokie, treść może przekroczyć granice).

inline-flex - zachowuje się jak blok inline. Treść ma pierwszeństwo (treść rozkłada bloki na wymaganą szerokość, tak aby linie, jeśli to możliwe, się zmieściły).

Kierunek flex

Kierunek układu bloku jest kontrolowany przez właściwość flex-direction.

Możliwa wartość:

wiersz - wiersz (wartość domyślna); row-reverse - rząd z elementami w odwrotnej kolejności; kolumna - kolumna; odwrócona kolumna - kolumna z elementami w odwrotnej kolejności.

rząd i rząd-odwrotny

kolumna i odwrócenie kolumny

Okład elastyczny

W jednej linii może znajdować się wiele bloków. To, czy się zawijają, czy nie, zależy od właściwości flex-wrap.

Możliwa wartość:

nowrap - bloki nie są przesyłane (wartość domyślna); wrap - bloki są przenoszone; wrap-reverse - bloki są owijane i układane w odwrotnej kolejności.

Skrótem właściwości flex-direction i flex-wrap jest właściwość: flex-flow.

Możliwe wartości: możesz ustawić obie właściwości lub tylko jedną. Na przykład:

elastyczny przepływ: kolumna; Flex-flow: zawijanie-odwracanie; flex-flow: owijanie z odwróconą kolumną;

Demo dla odwracania wierszy:

Zamówienie

Aby kontrolować kolejność bloków, użyj właściwości Order.

Możliwe wartości: liczby. Aby umieścić blok na pierwszym miejscu, nadaj mu kolejność: -1:

Uzasadnij treść

Istnieje kilka właściwości wyrównywania elementów: justify-content, Align-Items i Align-self.

justify-content i wyrównanie elementów są stosowane do kontenera nadrzędnego, wyrównanie do siebie jest stosowane do elementów podrzędnych.

justify-content odpowiada za wyrównanie osi głównej.

Możliwe wartości justify-content:

flex-start - elementy są wyrównywane od początku osi głównej (wartość domyślna); flex-end - elementy są wyrównywane od końca głównej osi; środek - elementy są wyrównane do środka głównej osi; przestrzeń pomiędzy - elementy są ułożone wzdłuż głównej osi, rozdzielając między sobą wolną przestrzeń; przestrzeń wokół - elementy są ułożone wzdłuż głównej osi, rozdzielając wokół siebie wolną przestrzeń.

elastyczny początek i elastyczny koniec

przestrzeń pomiędzy, przestrzeń wokół

Wyrównaj elementy

Align-Items odpowiada za wyrównanie wzdłuż osi prostopadłej.

Możliwe wartości elementów wyrównanych:

flex-start - elementy układane są od początku osi prostopadłej; flex-end - elementy są wyrównywane od końca osi prostopadłej; środek - elementy są wyrównane w środku; linia bazowa – elementy układane są wzdłuż linii bazowej; rozciąganie - elementy są rozciągane, zajmując całą przestrzeń wzdłuż osi prostopadłej (wartość domyślna).

Flex-start, Flex-koniec

linia podstawowa, rozciągnięcie

Dopasuj się

Align-self jest również odpowiedzialny za wyrównanie osi prostopadłej, ale jest ustawiony na indywidualne elementy elastyczne.

Możliwe wartości dla wyrównania siebie:

auto jest wartością domyślną. Wskazuje, że element używa elementów wyrównania elementu nadrzędnego; flex-start - element jest wyrównywany od początku osi prostopadłej; flex-end - element jest wyrównywany od końca osi prostopadłej; środek - element jest wyśrodkowany; linia bazowa – element jest wyrównany wzdłuż linii bazowej; stretch - element jest rozciągany, zajmując całą przestrzeń wysokości.

Wyrównaj zawartość

Aby kontrolować wyrównanie w wieloliniowym elastycznym kontenerze, dostępna jest właściwość wyrównania zawartości.

Możliwa wartość:

flex-start - elementy układane są od początku osi głównej; flex-end - elementy są wyrównywane od końca głównej osi; środek - elementy są wyrównane do środka głównej osi; przestrzeń pomiędzy - elementy są ułożone wzdłuż głównej osi, rozdzielając między sobą wolną przestrzeń; przestrzeń wokół - elementy są ułożone wzdłuż głównej osi, rozdzielając wokół siebie wolną przestrzeń; rozciągnij - elementy są rozciągane na całą wysokość (wartość domyślna).

Flex-start, Flex-koniec

środek, rozciąganie

przestrzeń pomiędzy, przestrzeń wokół

PS: Nigdy nie byłem w stanie zobaczyć niektórych rzeczy w akcji, na przykład linii flex-flow: zawijanie kolumny lub pełnego wpisu tego samego flex-direction: kolumna; owinięcie elastyczne: owinięcie; .

Elementy stoją w kolumnie, ale nie są przenoszone:

wrap nie działa z kierunkiem flex: kolumna; , chociaż w specyfikacji wygląda to tak:

Myślę, że z czasem to zadziała.

UPD z 21.06.2014: wszystko działa, jeśli ustawisz wysokość bloku. Dzięki za wskazówkę

W tym artykule przedstawimy technologię CSS Flexbox, zaprojektowaną do tworzenia elastycznych układów stron internetowych.

Obsługa przeglądarki dla technologii CSS Flexbox

Technologia Flexbox jest już obsługiwana przez prawie wszystkie obecnie używane przeglądarki (z prefiksami: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

Podstawy Flexbox (siatka)

Flexbox opiera się na siatce. Składa się tylko z 2 elementów. Pierwszym elementem jest pojemnik elastyczny. Tworzenie kontenera elastycznego odbywa się poprzez dodanie właściwości display CSS o wartości flex lub flex-inline do wymaganego elementu HTML.

Po tym wszystkie bezpośrednie dzieci kontenera elastycznego(dzieci) automatycznie stają się elementy elastyczne(drugi element siatki Flexbox).

znaczniki HTML:

Flex-container ( display: flex; /* flex || inline-flex */ ) Struktura siatki Flexbox

Elementy Flex domyślnie zajmują całą wysokość elastycznego kontenera.

Wartość flex lub flex-inline określa sposób pojemnik elastyczny zostaną zaprezentowane na stronie. Jeśli trzeba to przedstawić jako blok, a następnie użyj wartości flex. Jeśli element musi być reprezentowany jako małe litery, a następnie użyj wartości flex-inline. W tym przypadku zajmie tyle miejsca na stronie, ile potrzeba do wyświetlenia jej elementów.

Kierunek wyrównania elementu elastycznego

Określenie kierunku ułożenia elementów elastycznych wewnątrz elastycznego kontenera odbywa się za pomocą osie.

W flexboxie przydzielają 2 osie. Pierwsza oś nazywa się podstawowy Lub główny(domyślnie skierowany w prawo). Drugi - poprzeczny(domyślnie w dół).

Pozycje w kontenerze elastycznym są ułożone w jednej linii (domyślnie), nawet jeśli nie ma na nie wystarczającej ilości miejsca. Elementy elastyczne są rozmieszczone w elastycznym pojemniku wzdłuż głównej osi.

Domyślny układ elementów w kontenerze (elementy elastyczne, które nie mają wystarczającej ilości miejsca w kontenerze elastycznym, wypadają poza niego)

W CSS Flexbox umożliwienie przenoszenia elementów elastycznych do nowych linii (jeśli nie mają wystarczającej ilości miejsca w bieżącej linii) odbywa się poprzez ustawienie właściwości flex-wrap kontenera CSS Flex na wrap lub wrap-reverse .

Flex-owijka: owijka; /* nowrap (w jednej linii - domyślnie) wrap (zezwala na zawijanie elementów elastycznych do nowych linii) wrap-reverse (zawija elementy elastyczne w odwrotnej kolejności) */

Wartości wrap i wrap-reverse właściwości CSS flex-wrap określają kierunek osi poprzecznej.

Ustawienie kierunku głównej osi flexboxa odbywa się za pomocą właściwości CSS flex-direction.

Kierunek flexu: rząd; /* wiersz (w prawo) - domyślne odwrócenie wiersza (w lewo) kolumna (w dół) odwrócenie kolumny (w górę) */

Korzystając z tej właściwości, możesz upewnić się, że elementy elastyczne nie są ułożone poziomo (w rzędach), ale pionowo (w kolumnach).

Właściwości flex-direction i flex-wrap można określić za pomocą ogólnej właściwości CSS flex-flow:

Flex-flow: teraz owinięcie rzędów; /* 1 wartość – kierunek flex, 2 wartości – flex-wrap */

Wyrównywanie elementów elastycznych

W Flexboxie wyrównywanie elementów w kontenerze odbywa się w dwóch kierunkach (osiach).

Wyrównywanie elementów elastycznych wzdłuż głównej osi

Wyrównywanie elementów wzdłuż głównej osi odbywa się za pomocą właściwości CSS justify-content:

uzasadnij treść: elastyczny start; /* flex-start (elementy flex są wyrównane względem początku osi) – domyślnie flex-end (elementy flex są wyrównane względem końca osi) center (w środku pojemnika flex) odstęp pomiędzy (równomiernie, czyli z jednakową odległością pomiędzy elementami elastycznymi) odstęp wokół (równomiernie, ale z dodaniem połowy odstępu przed pierwszym elementem elastycznym i po ostatnim) */ Opcje ułożenia elementów elastycznych wzdłuż osi głównej

Wyrównywanie elementów elastycznych wzdłuż osi poprzecznej

Wyrównanie elementów elastycznych w kontenerze elastycznym wzdłuż osi poprzecznej odbywa się za pomocą właściwości CSS Align-items:

Wyrównaj elementy: rozciągnij; /* stretch (rozciąganie na całej długości osi poprzecznej) - domyślnie flex-start (względem początku osi poprzecznej) flex-end (względem końca osi poprzecznej) baseline (względem linii bazowej ) środek */ Opcje wyrównywania elementów elastycznych wzdłuż osi poprzecznej

Wyrównywanie linii elastycznych kontenerów

CSS Flexbox pozwala wyrównać nie tylko same elementy elastyczne, ale także linie, na których się znajdują.

Align-content: stretch /* stretch (rozciągnięty na całej długości osi poprzecznej) – domyślnie flex-start (względem początku osi poprzecznej) flex-end (względem końca osi poprzecznej) center ( w środku) odstęp między (równomiernie, czyli z jednakową odległością między wierszami) odstęp wokół (równo, ale z dodaniem połowy odstępu przed pierwszą linią i po ostatniej) */ Opcje wyrównywania linii elastycznego kontenera

Właściwość wyrównania treści ma sens tylko wtedy, gdy elementy elastyczne w kontenerze elastycznym znajdują się w wielu wierszach. Aby tak się stało, konieczne jest, po pierwsze, aby szerokość wszystkich elementów elastycznych była większa niż szerokość elastycznego kontenera, a po drugie, elastyczny kontener musi mieć właściwość CSS flex-wrap ustawioną na wrap lub wrap-reverse.

Właściwość CSS „align-self”.

Właściwość wyrównania-self, w odróżnieniu od poprzednich (justify-content, wyrównanie-items i wyrównanie-treść), jest przeznaczona dla elementów elastycznych. Pozwala na zmianę wyrównanie elementów elastycznych wzdłuż kierunku osi poprzecznej. Właściwość „align-self” może przyjmować te same wartości, co „align-items”.

Wyrównaj elementy: rozciągnij; /* auto (domyślnie) || rozciągaj || elastyczny start || końcówka elastyczna || poziom bazowy || Centrum */

Flex-container (wyświetlacz: flex; szerokość: 300 pikseli; wysokość: 150 pikseli; wyrównanie elementów: środek; dopełnienie: 10 pikseli; kolor tła: #efefef; ) .flex-container_element-1, .flex-container_element-2, .flex -container_element-3, .flex-container_element-4 ( podstawa flex: 70px; wyrównanie tekstu: środek; dopełnienie: 15px; rozmiar czcionki: 30px; ) .flex-container_element-1 ( wyrównanie-self: flex-start; tło: #fe4; ) .flex-container_element-2 ( wyrównaj-self: flex-end; tło: różowy; ) .flex-container_element-3 ( wyrównaj-self: rozciągnij; tło: limonka; ) .flex-container_element-4 ( wyrównanie-self: auto; tło: cyjan; ) Jak działa właściwość CSS merge-self

Zmiana kolejności elementów elastycznych

Domyślnie elementy elastyczne są wyświetlane w kontenerze elastycznym w kolejności, w jakiej pojawiają się w kodzie HTML. Aby zmienić kolejność niektórych elementów elastycznych względem innych w CSS Flexbox, możesz użyć właściwości Order. Ta właściwość CSS porządkuje elementy elastyczne w kontenerze elastycznym w kolejności rosnącej według ich liczby.

Kolejność: 0; /* 0 (domyślnie) dodatnia lub ujemna liczba całkowita */

Na przykład:

...

CSS: .flex-container ( display: flex; ) /* przesuń drugi element flex na koniec */ .flex-container_element-2 ( kolejność: 2; ) /* przesuń 3 element na 2 */ .flex-container_element-3 (kolejność: 1; ) /* umieść 4 elementy elastyczne przed 1 */ .flex-container_element-4 (kolejność: -1; ) Jak działa właściwość kolejności CSS

Kontrolowanie szerokości elementu elastycznego

Flexbox ma kilka właściwości CSS, które określają, jak szeroki może być element elastyczny.

Właściwość CSS w oparciu o flex

Ta nieruchomość jest przeznaczona dla ustawienie początkowej szerokości elementu elastycznego. Możesz ustawić wartość szerokości za pomocą różnych jednostek miary, takich jak px,%, em itp. Domyślnie ta właściwość jest ustawiona na auto (w tym przypadku szerokość elementu zostanie obliczona automatycznie na podstawie jego zawartości) .

Ostateczna szerokość elementu elastycznego zostanie określona przez w zależności od wartości właściwości CSS flex-grow i flex-shrink, które są ustawione nie tylko dla tego elementu, ale także dla innych elementów flex tego elastycznego kontenera.

właściwość CSS flex-grow

Ta właściwość określa, czy początkowa szerokość elementu elastycznego wzrasta (rośnie). Zwiększanie szerokości elementu elastycznego odbywa się poprzez wolna przestrzeń liniowa. Wartość właściwości CSS flex-grow to liczba całkowita. To właśnie ta wartość określa (jeśli jest większa lub równa 1), jaką część wolnej przestrzeni zajmie dla siebie element elastyczny.

Na przykład:

...

CSS: .flex-container ( wyświetlacz: flex; szerokość: 600px; ) .flex-container_element-1 ( flex-baza: 40%; flex-grow: 1; ) .flex-container_element-2 ( flex-baza: 40% ; flex-grow: 4; ) Jak działa właściwość CSS flex-grow

W tym przykładzie, jeśli elementy elastyczne znajdują się w tej samej linii i jest wolne miejsce (600×(1-0,8)=120px):

1/5 tej przestrzeni zostanie dodana do szerokości elementu.flex-container_element-1 (120×1/5=24px);
4/5 tej przestrzeni zostanie dodane do szerokości elementu.flex-container_element-2 (120×4/5=96px).

Innymi słowy, właściwość CSS flex-grow pozwala nie tylko określić, że szerokość elementu flex może rosnąć, ale także określić, jak bardzo ta wartość może wzrosnąć w stosunku do innych elementów.

Domyślnie właściwość CSS flex-grow jest ustawiona na 0. Oznacza to, że element flex nie może rosnąć (zwiększać swojej szerokości).

właściwość CSS typu flex-shrink

Ta właściwość określa, czy można zmniejszyć szerokość elementu elastycznego. Zmniejszenie szerokości elementu elastycznego nastąpi tylko wtedy, gdy szerokość linii nie będzie wystarczająca do wyświetlenia wszystkich elementów elastycznych znajdujący się w nim. Wymagana szerokość jest obliczana na podstawie w oparciu o szerokość początkową, który zawiera każdy element elastyczny.

Na przykład:

...

CSS: .flex-container ( wyświetlacz: flex; szerokość: 500px; ) .flex-container_element-1 ( flex-basis: 300px; flex-shrink: 1; ) .flex-container_element-2 ( flex-basis: 300px; flex -shrink: 3; ) Jak działa właściwość CSS flex-shrink

Szerokość kontenera elastycznego wynosi 500 pikseli. Elementy elastyczne wymagają do wyświetlenia rozmiaru 600 pikseli. W rezultacie brakuje 100 pikseli. W tym przykładzie można zredukować 2 elementy elastyczne (.flex-container_element-1 i .flex-container_element-2). Szerokość pierwszego elementu elastycznego.flex-container_element-1 w tym przypadku będzie wynosić 300 – 1/4*100= 275px. Szerokość drugiego elementu elastycznego.flex-container_element-2 w tym przypadku będzie wynosić 300 – 3/4*100= 225px.

Domyślna wartość:

Flex-shrink: 1;

Jeśli potrzebujesz zapobiegają zmniejszaniu się szerokości elementu elastycznego, należy określić liczbę 0 jako wartość właściwości flex-shrink.

Właściwość elastyczna CSS

Aby łatwo ustawić flex-grow, flex-shrink i flex-base, możesz użyć właściwości flex CSS.

Domyślna wartość:

Flex: 0 1 automatyczny; /* 0 - flex-grow (1. wartość) 1 - flex-shrink (2. wartość) auto - flex-basis (3. wartość) */

Układ strony przy użyciu CSS Flexbox

W tej sekcji stworzymy prosty, responsywny układ przy użyciu Flexboksa.

Struktura układu będzie składać się z 3 sekcji:

nagłówek (aby wyświetlić nagłówek i menu główne);
main (aby wyświetlić część główną);
stopka (dla stopki).

Główna część z kolei zostanie podzielona na 2 kolejne sekcje (umieścimy je za pomocą CSS Flexbox). Na dużych ekranach (>=992px) sekcje te będą ułożone poziomo, a na pozostałych ekranach - pionowo (<992px).

[Nagłówek...]

[Głównym elementem...]

CSS: /* kontener (ustawia szerokość bloku w zależności od szerokości widocznego obszaru) */ .container ( pozycja: względna; margines-lewy: auto; prawy-margines: automatyczny; dopełnienie-prawe: 15px; dopełnienie-lewe: 15px; ) @ media (min-szerokość: 576px) ( .container ( szerokość: 540px; max-width: 100%; ) ) @media (min-width: 768px) ( .container ( szerokość: 720px; max-width: 100%; ) ) @media (min-szerokość: 992px) ( .container ( szerokość: 960px; max-width: 100%; ) ) @media (min-width: 1200px) ( .container ( szerokość: 1140px; max-width: 100 % ; ) ) /* elastyczny kontener */ .row-flex ( display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; - ms-flex-wrap: zawiń; flex-wrap: zawiń; margines-prawy: -15px; margines-lewy: -15px ) /* Ustawienia elementów elastycznych CSS */ .col-flex ( pozycja: względna; szerokość: 100%; minimalna wysokość: 1px; dopełnienie po prawej: 15px; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; elastyczność: 0 0 100%; maksymalna szerokość: 100%; ) /* szerokość artykułu i bloków bocznych dla dużych ekranów */ @media (min-width: 992px) ( /* 2/3 szerokości kontenera */ .main_article ( -webkit-box-flex: 0; -webkit-flex : 0 0 66,666667%; -ms-flex: 0 0 66,666667%; flex: 0 0 66,666667%; maksymalna szerokość: 66,666667% ) /* 1/3 szerokości kontenera */ .main_aside ( -webkit-box-flex: 0; -flex-webkit: 0 0 33,333333%; -ms-flex: 0 0 33,333333%;

Aby obsłużyć układ w większości przeglądarek, dodamy do CSS niezbędne przedrostki i maksymalną szerokość.

Aby „zamienić” blok w elastyczny kontener, użyjemy klasy row-flex. Ustawimy szerokość każdego elementu flex (main_article i main_aside) wewnątrz elastycznego kontenera za pomocą właściwości flex CSS.

Jako przykład wykorzystajmy Flexbox do oznaczenia bloku „Stopka” i sekcji sekcji głównego artykułu „Ciekawe rzeczy na stronie”.

Sekcję „Stopka” podzielimy na 4 równe części (minimalna szerokość jednej części to 200px), a sekcję „Ciekawości na stronie” na 3 części (minimalna szerokość jednej części to 300px).

[Nagłówek...]

[Głównym elementem...]

[jeszcze 1...]

[2 więcej...]

[3 więcej...]

Dodatkowe CSS:

Footer_block, .main_other_article ( -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; - ms-flex-positive: 1; flex-grow: 1; maksymalna szerokość: 100% )

Moduł Układ Flexboxa(elastyczne pudełko - obecnie rekomendacja kandydata W3C) ma na celu zapewnienie bardziej efektywnego sposobu rozmieszczenia, wyrównania i dystrybucji wolnej przestrzeni pomiędzy elementami w kontenerze, nawet jeśli ich rozmiar jest nieznany i/lub dynamiczny (stąd słowo „elastyczny”) .

Główną ideą układu elastycznego jest umożliwienie kontenerowi zmiany szerokości/wysokości (i kolejności) jego elementów, aby jak najlepiej wypełnić przestrzeń (w większości przypadków w celu obsługi wszystkich typów wyświetlaczy i rozmiarów ekranów). Elastyczny pojemnik rozciąga elementy, aby wypełnić przestrzeń, lub ściska je, aby zapobiec ich przepełnieniu.

Co najważniejsze, układ flexbox jest niezależny od kierunku, w przeciwieństwie do zwykłych układów (pudełka ułożone pionowo i elementy inline ułożone poziomo). Chociaż zwykły układ jest świetny w przypadku stron internetowych, brakuje mu elastyczności (bez zamierzonej gry słów), aby obsługiwać duże lub złożone aplikacje (szczególnie jeśli chodzi o zmianę orientacji ekranu, zmianę rozmiaru, rozciąganie, zmniejszanie itp.).

Komentarz: Układ Flexbox najlepiej nadaje się do komponentów aplikacji i układów o małej skali, podczas gdy układ siatki jest częściej używany do układów o dużej skali.

Podstawy

Ponieważ flexbox to cały moduł, a nie pojedyncza właściwość, łączy w sobie wiele właściwości. Część z nich należy zastosować do kontenera (element nadrzędny, tzw pojemnik elastyczny), podczas gdy inne właściwości dotyczą elementów podrzędnych, lub elementy elastyczne.

Jeśli zwykły układ opiera się na kierunkach przepływu elementów blokowych i liniowych, wówczas układ elastyczny opiera się na „elastycznych kierunkach przepływu”. Sprawdź ten diagram ze specyfikacji, który wyjaśnia podstawową ideę układów elastycznych.

Zasadniczo elementy będą dystrybuowane wzdłuż główna oś(z początek główny zanim koniec główny) lub wzdłuż oś poprzeczna(z start krzyżowy zanim przekrój).

oś główna- główna oś, wzdłuż której rozmieszczone są elementy elastyczne. Należy pamiętać, że nie musi być on poziomy, wszystko zależy od właściwości kierunku zginania (patrz poniżej).
początek główny | koniec główny- elementy elastyczne umieszcza się w kontenerze od głównego położenia początkowego do głównego położenia końcowego.
główny rozmiar- szerokość lub wysokość elementu elastycznego w zależności od wybranej wartości głównej. Podstawową wielkością może być szerokość lub wysokość elementu.
oś poprzeczna- oś poprzeczna prostopadła do głównej. Jego kierunek zależy od kierunku osi głównej.
start krzyżowy | przekrój- przewody elastyczne są wypełniane elementami i umieszczane w pojemniku od pozycji poprzecznej do pozycji poprzecznej.
rozmiar krzyża- szerokość lub wysokość elementu elastycznego w zależności od wybranego wymiaru jest równa tej wartości. Właściwość ta jest taka sama jak szerokość lub wysokość elementu w zależności od wybranego wymiaru.

Nieruchomości

wyświetlacz: flex | inline-flex;

Dotyczy:

Definiuje kontener elastyczny (wbudowany lub blokowy w zależności od wybranej wartości), łączy kontekst elastyczny dla wszystkich jego bezpośrednich dzieci.

wyświetlacz: inne wartości | zginać | inline-flex;

Pamiętać:

Kolumny CSS nie działają z kontenerem elastycznym
float , clear i Vertical-align nie działają z elementami elastycznymi