Wprowadzenie do FlexBox

Wprowadzenie do FlexBox Zastąp Grid. Krzysztof Węgliński

Spis treści Wstęp...4 Rozdział 1 - Definicje...5 RWD - Responsive Web Design...5 Grid...5 Flexbox...6 Rozdział 2 - Struktury...8 Główny wrapper...8 Kolumny / Pudełka...8 Pogląd na całość...12 Rozdział 3 - Style kolumn...14 Standardowy styl...14 Elementy równej wysokości...14 Pozostawmy tabele danym tabelarycznym...15 Rozmieszczenie elementów w pionie...15 Możemy to oprzeć o własność flex...15 Dla indywidualnych elementów...16 Rozmieszczenie elementów w poziomie...16 Rozdział 4 - Style elementów...17 Rozmiary elementów...17 Flex-grow...17 Flex-shrink...17 Flex-basis...17 Niestandardowa kolejność elementów...18 Pozycja elementu w pionie...18 Rozdział 5 - Przykład...20 Układ typu blog...20 Rozdział 6 - Dodatkowa lektura...21 Błędy...21 Wsparcie przeglądarek...21 Rozdział 7 - Ściąga...22 Zakończenie...23 O autorze...23 Wprowadzenie do FlexBox - strona 2

Założenia Wstęp Ten podręcznik zakłada, drogi czytelniku, że jesteś już w posiadaniu podstawowej wiedzy z zakresu HTML5 i CSS3 i otarłeś się o RWD - Responsive Web Design, czyli projektowanie responswnych stron internetowych. Nie mniej, na pewno znajdą się tacy, którzy mimo nie posiadania tej wiedzy poradzą sobie z całą książką. Cel Niniejszy podręcznik będzie traktować o kluczowych problemach (i rozwiązaniach tych problemów), na które można, a nawet na pewno natrafisz chcąc stworzyć zarówno prostą stronę internetową, aplikację czy też zaawansowany system w oparciu o przeglądarki WWW. Wprowadzenie do FlexBox - strona 3

RWD - Responsive Web Design Rozdział 1 Definicje To technika tworzenia stron internetowych w taki sposób aby skład i układ elementów dynamicznie dostosowywał się do danego medium. Przed powstaniem tej techniki używaliśmy do każdego medium (telefon, czytnik, komputer, laptop, telewizor itd.) oddzielny arkusz styli, który był czytany przez przeglądarkę jako jedyny, lub dodatkowy zestaw styli dla danego medium, jako uzupełnienie. Później pojawił się zestaw styli o nazwie media query pozwalający określić do jakiego medium (szerokość ekranu, gęstość pixeli, wysokość ekranu, proporcje itd.) odnosimy się w następnych liniach kaskadowego arkuszu styli. Wraz z pojawieniem się tych narzędzi pojawił się RWD, który zrewolucjonizował spojrzenie na strony. Grid Grid to metoda składu stron oparta o, jak nazwa wskazuje, siatki. Wstawiamy kolumny, które opieramy o kilka kluczowych własności, takich jak: width/max-width: x %; float:left; Po czym na okalający div dodajemy sztuczkę zwaną clearfixem. Clearfix rozwiązuje problem opływania się kolejnych elementów. Na przykład jeśli mamy dwie kolumny z czego jedna jest niższa to gdy wstawimy następne, w nowym wierszu, to zapełnią one wolne miejsce pozostałe pod niższą kolumną. W większości przypadków nie chcemy uzyskiwać takiego efektu i wtedy właśnie na pomoc przychodzi clearfix i wygląda on następująco:.clearfix:after { content: " "; /* Starsze przeglądarki nie wspierają pustej własności content */ visibility: hidden; display: block; Wprowadzenie do FlexBox - strona 4

Flexbox height: 0; clear: both; } Flex box, flex, czy flexible boxes to zyskujący popularność sposób składu stron i aplikacji internetowych. Jego bezpośrednim poprzednikiem był Grid, który w zasadzie zapoczątkował erę responsywnego internetu. Większość stron w sieci na tę chwilę opartych jest na Gridzie. Niestety obarczony jest on pewnymi zaszłościami i problemami w sposobie działania. Na przykład nie możemy w prosty sposób uzyskać dwóch elementów obok siebie o równej wysokości przy założeniu, że ich zawartość będzie przydzielana dynamicznie i wymagana wysokość nie jest z góry znana. Oczywiście, możemy to obsłużyć za pomocą prostej sztuczki w JavaScript, ale chyba nie o to chodzi. Zwłaszcza gdy w grę wchodzą dobre praktyki czy wsparcie dla klientów bez obsługi JavaScript. Standardowo aby wykonać prosty skład na dwóch kolumnach będziemy potrzebowali okalającego <div>, który będzie posiadał własność display: flex; Oraz kolumn o własności: flex: x; gdzie x to wielkość kolumny, ale o tym później. Gotowe, mamy najprostszy układ kolumnowy we flexie. Potrzebujemy znać dwie własności w CSS, w przeciwieństwie do grida, który wymaga ich dwóch oraz Clearfix u, który składa się na pseudo klasę :after oraz pięć kolejnych własności. Flex wprowadza nas w zupełnie inny sposób rozwiązania wielu problemów, dając nam mnogość funkcjonalności prosto z pudełka. Możemy nie tylko definiować wielkości elementów czy wzajemne opływanie ale również kierunek wyświetlania elementów a nawet ich kolejność (co sprawia, że nazywany jest kierunkowo agnostycznym). Bezpośrednio z arkuszu styli. Niektórzy mówią, że flex jest dobry dla małych stron i porstych aplikacji a grid dla zaawansowanych systemów. Nie znalazłem jednak żadnego argumentu popierającego tę hipotezę. Nie Wprowadzenie do FlexBox - strona 5

krępuj się zatem, stosować flex w dowolnym rozwiązaniu. Zacznijmy więc naszą elastyczną podróż Wprowadzenie do FlexBox - strona 6

Główny wrapper Rozdział 2 Struktury Zarówno w Grid jak i Flex, nasze kolumny muszą znaleźć się we wrapperze. Element ten pozwala przeglądarce zorientować się i oczekiwać, że następne elementy będą boxami (pudełkami) Flex, lub przygotować miejsce na kolumny Grid. Dla Flex wrapper nazwiemy i nadamy własności:.container.{ display: flex; }; Natomiast w przypadku Grid będziemy używać pseudo klasy after, o następujących własnościach:.row:after { content: ""; display: table; clear: both; }; Głównego wrappera będziemy używać do definiowania strefy na kolumny/pudełka i rozdzielania stref między sobą. Kolumny / Pudełka To elementy w których zawieramy całą treść naszej strony. Dzielimy je na strefy zwane kolumnami, czy pudełkami. Strefy te mogą zawierać np. sidebar, treść artykułu, stopkę czy też dzielić stopkę na segmenty. Przy użyciu techniki Grid każdą z kolumn umownie nazywamy klasą.col-wielkość (od column czyli kolumna). Musimy też wstępnie ustalić ich maksymalną liczbę. Najpopularniejszą ilość stanowi 12. Jeżeli użyjemy jednej kolumny (.col-1) pozostaje nam miejsca na kolejne 11. Kolumna zawsze będzie zajmować procent szerokości całego wrappera. Tak więc jeśli mamy sytuację kolumny.col-6 czyli o szerokości 6 na 12 to będzie ona miała dokładnie 50% szerokości. A obok niej, w jednej linii Wprowadzenie do FlexBox - strona 7

możemy dodać jeszcze dowolną ilość kolumn o sumie szerokości 6 (np. 3 i 3, 1 i 5, 6 itd.). Wygląda to w następujący sposób: CSS [class^= col- ] { float: left; }.col-6 { width: 50%; }.col-3 { width: 25%; } odwołanie [class^= col- ] oznacza wszystkie klasy rozpoczynające się od przedrostka col-. HTML <div class= row > <div class= col-6 > mam 50% szerokości </div> <div class= col-3 > mam 25% szerokości </div> </div> Przeglądarka Dla podkreślenia efektu pokolorowałem kolumny i wyświetlone wziąłem w ramkę. Oczywiście odstępy są tylko ilustracyjne, jeśli nie zdefiniujemy odstępów to kolumny będą do siebie przylegać. Ten wyszarzony element na prawym krańcu ekranu to miejsce o szerokości trzech kolumn w które możemy włożyć następne elementy. Aktualne elementy nie zajmą jego Wprowadzenie do FlexBox - strona 8

miejsca. Mają od góry zdefiniowaną szerokość, która liczona jest względem rodzica, czyli naszego wrappera.row. W przypadku użycia Flex struktura będzie zachowywała się odrobinę inaczej. Mianowicie w bazowej wersji mamy do czynienia z pudełkami. Pudełka te zajmują pełną szerokość wrappera niezależnie od ilości użytych elementów, pod warunkiem, że ich zawartość nie ogranicza minimalnej szerokości pudełka. Tak więc przy założeniu, że nasze pudełka mogą mieć szerokość równą 0 - możemy dać nieskończoność elementów flex i żaden nie przejdzie do nowej linii, ale to dość abstrakcyjny przykład. Weźmy pod uwagę sytuację identyczną jak przykładzie z Grid. Tym razem nie musimy z góry przyjmować ilości kolumn, dostosowywane są dynamicznie na podstawie ilości zawartych elementów. Jeśli chcemy mieć pewność ile zajmą nasze pudełka możemy zdefiniować maksymalną szerokość (o tym za chwilę), lub dokonać prostych obliczeń. Szerokość naszej kolumny wynosi: X = (Y/Z)*100% gdzie X to szerokość kolumny w procentach, Y to własość flex a Z to suma wszystkich wartości własności flex wewnątrz danego wrappera. Właśnie, własność flex definiuje nam wielkości pudełek. Spójrzmy na przykład z poprzedniego rozwiązania dla Grid. CSS.flex-6 { flex: 6; }.flex-3 { flex: 3; } HTML <div class= flex > <div class= flex-6 >.flex-6 </div> <div class= flex-3 >.felx-3 </div> </div> Przeglądarka Wprowadzenie do FlexBox - strona 9

Jak widzisz, tym razem elementy zajęły proporcjonalnie miejsce do swoich wartości odpowiednio 6/9 i 3/9 szerokości. Równie prawidłową i identyczną w efekcie metodą będzie zastosowanie flex-3 i flex-1 dla pudełek powyżej (przy założeniu, że zachowamy wcześniejszą konwencję nazewniczą). Dobrze, w takim razie jak uzyskać identyczny efekt jak w przykładzie dla Grid? Nie zawsze chcemy dynamicznie przydzielać szerokość. Sposoby są dwa, jeden prostszy, ale mniej estetyczny i drugi odrobinę bardziej skomplikowany za to zgodny ze standardami i przydatny w szerszym użyciu flex a. W prostszej wersji dodajemy po prostu kolejny, tym razem pusty DIV z klasą flex-3, dzięki czemu suma pudełek jest identyczna co kolumn w przykładzie z Grid. Co z naszego prostego wzoru pozwala nam wnioskować o wymiarach kolejno 50%, 25% i 25% pustego miejsca. W wersji trudniejszej tworzymy serię klas o ograniczonej szerokości, warto, żeby wyróżniała się ona od poprzednich klas, dzięki czemu będziemy mogli korzystać z oryginalnych własności Flex jak i podejścia ala Grid. CSS.flex-max-6 { width: 50%; }.flex-max-3 { width: 25%; } HTML <div class= flex > <div class= flex-max-6 >.flex-max-6 </div> Wprowadzenie do FlexBox - strona 10

<div class= flex-max-3 >.flex-max-3 </div> </div> Przeglądarka Jak widzisz, uzyskaliśmy efekt identyczny co w przypadku Grid, natomiast nie musimy martwić się o clearfix. Co więcej, tym razem z racji, że podaliśmy szerokości, nie potrzeba dodawać własności flex dla pudełek. Pogląd na całość Teraz, posiadając podstawową wiedzę na temat różnic między Gridem a Flexem będzie nam o wiele łatwiej zrozumieć idee stojące za tymi rozwiązaniami. Przyszedł czas na wprowadzenie do zaawansowanych rozwiązań w obu metodach. Co do samego Grida, ciężko wspomnieć coś więcej przed rozpoczęciem kolejnego rozdziału. Naturalnie należy wspomnieć, że każda kolumna jest floatującym obiektem drzewa DOM i w zasadzie tyle, całość opiera się przecież o klasyczne elementy rzeczonego drzewa, które powinien znać początkujący Frontend Developer. Jest jednak dość obszerna informacja na temat Flexa. Aby to lepiej zrozumieć, przedstawiłem na ilustracji wszystkie elementy obiektu flex. Pamiętaj, że zawsze możesz wrócić do tej strony gdy działanie, któregoś z elementów na następnych stronach będzie dla Ciebie nie jasne. Zacznijmy od lewego górnego rogu. Oś główna to innymi słowy szerokość wrappera, jej przeciwnym elementem jest oś poprzeczna definiująca jego wysokość. Możemy je przyrównać do osi X i Y dobrze nam znanych z lekcji matematyki. Każda z tych osi ma swój początek i koniec. Wewnątrz pojemnika znajdują się pudełka flex. Pudełka mają swój wymiar główny (poziomy) i poprzeczny (pionowy). Wprowadzenie do FlexBox - strona 11

Tak więc lewy górny róg to de facto początek naszej struktury flex a prawy dolny róg to jej koniec. Wprowadzenie do FlexBox - strona 12

Standardowy styl Rozdział 3 Style kolumn W przypadku Grida standardowo elementy znajdują się w lewym górnym rogu i rozkładają się jeden za drugim. Ich wysokości są uzależnione od ilości zawartości i własności padding (pomijamy definiowane wysokości z pomocą min-height czy height). Natomiast szerokość definiujemy wcześniej w procentach, adekwatnie do klas,co zostało objaśnione w rozdziale drugim. Całą resztę musimy przypisać dodatkowo. W przypadku flexa różnicą będą elementy o jednakowej wysokości. Co ważne nie będą one się opływały tylko występowały obok siebie, równomiernie dystrybuując przestrzeń na podstawie własności flex, co zostało opisane w rozdziale drugim. W zasadzie bez większych różnic między metodami, przejdźmy jednak do bardziej praktycznych zastosowań. Elementy równej wysokości Jeśli chcemy aby elementy w jednym wrapperze były równomiernej wysokości w przypadku Grid potrzebujemy użyć jednej z kilku sztuczek. Może to być skrypt JavaScript, który będzie pobierał wysokość wrappera i aplikował ją do zawartych elementów, następnie usuwający te własności przy skalowaniu okna i wykonujący procedurę od nowa (tak aby uniknąć sytuacji gdzie treść wypływa poza kontener kolumny). Mogą to być style przypisane dla tabel czyli dla wrappera własność display: table; dla kolumn display: table-cell; W ten stosunkowo prosty sposób elementy wyświetlą się zupełnie jak w tabeli, czyli uzyskają również równą wysokość, dlatego, że właściwie dla przeglądarki stają się tabelą. Według standardów przyjmujemy jednak, że struktury tabel użytkujemy wyłącznie dla danych tabelarycznych (np. bilans przychodów i rozchodów w aplikacji do zarządzania domowym budżetem). Wprowadzenie do FlexBox - strona 13

Pozostawmy tabele danym tabelarycznym i skorzystajmy z zupełnie nowego rozwiązania. Z własności flex możemy skorzystać również jako drobny dodatek dla systemu Grid. Jeśli wyłączymy w danej serii kolumn własność float i przypiszemy flex, pozostawiając definicje maksymalnej szerokości a do wrappera dodajmy display: flex; Voila nasze kolumny będą teraz posiadać jednakową wysokość. Rozmieszczenie elementów w pionie Kolejnym częstym zapotrzebowaniem jest rozmieszczenie elementów względem wysokości wrappera. Załóżmy, że nasze kolumny czy pudełka nie mają być jednakowej wysokości i chcemy aby były wyrównane do postawy możemy zastosować kilka sztuczek. W przypadku Grida prawdopdobonie zastosujemy własność position: absolute, sztywne wysokości elementów + margin-top lub obsłużymy to za pomocą JavaScript wyliczając margin-top dla elementów na podstawie ich wyskości i wysokości wrappera. Pomijam rozwiązanie przy użyciu tabel, bo jak wcześniej pozostawiamy to rozwiązanie dla danych tabelarycznych. Podobnie jest w przypadku centrowania względem linii centralnej przebiegającej dokładnie przez środek wysokości wrappera. Możemy skorzystać z własności display: inline-block; czy z position: absolute; Tylko po co skoro: Możemy to oprzeć o własność flex jeżeli chcemy aby elementy centrowały się względem siebie w linii, na środku osi poprzecznej, skorzystamy z własności align-items: center; Tak. Właśnie tyle wystarczy aby wycentrować elementy względem środka. Oczywiście jeśli nasz wrapper posiada własność display: flex; Tak więc dla wyrównywania względem linii osi poprzecznej możemy skorzystać z następujących własności CSS: align-items: flex-start flex-end center stretch baseline ; align-items: flex-start - przypina elementy do początku osi poprzecznej, flex-end - przypina elementy do końca osi poprzecznej, center - centruje elementy względem osi poprzecznej, stretch - rozciąga elementy na wysokość osi poprzecznej Wprowadzenie do FlexBox - strona 14

baseline - ustawia elementy tak aby linia poprowadzona pod pierwszą linią tekstu była wspólna dla wszystkich pudełek. Dla indywidualnych elementów Co więcej flex pozwala nam na podpinanie własności nie tylko dla całej grupy ale dla indywidualnych elementów niezależnie. Tak więc pierwsze pudełko może być wyrównane do góry, drugie do środka a trzecie do dołu wrappera. Uzyskujemy to przez nadanie własności align-self do wskazanego pudełka. Dla tej własności wartości są dokładnie takie same i uzyskują taki sam efekt jak w przypadku alignitems, dochodzi do nich wartość auto, pobierająca wartość kontenera. align-self: auto flex-start flex-end center stretch baseline ; Rozmieszczenie elementów w poziomie Do niedawna, w przypadku użycia samego Grid, nie mieliśmy innej możliwości na zmianę kolejności wyświetlania elementów, jak manipulacja drzewem DOM. Po prostu fizycznie przestawialiśmy elementy, np. przy użyciu JavaScriptu. Te dni już dawno minęły. Flex pozwala nam na zmianę kierunku wyświetlania elementów przy użyciu flex-direction. Własność ta pozwala nam na ustawienie elementów w kierunku z lewa na prawo, z prawa na lewo, góra dół i dół góra. flex-direction: row row-reverse column column-reverse; flex-direction: row - najpopularniejsza kolejność lewo-prawo, row-reverse - prawo-lewo, column - w pionie góra-dół, column-reverse - w pionie dół-góra. Wprowadzenie do FlexBox - strona 15

Rozmiary elementów Rozdział 4 Style elementów W przypadku Grida, czy ogólnie CSS wyrażanie szerokości elementów wydaje się stosunkowo proste - podajemy szerokość w procentach, pixelach, generalnie używamy: width: 0-100% <liczba całkowita>px auto inherit initial; Które kolejno definiują: procentowy udział w szerokości wrappera, szerokość w pixelach, szerokość automatycznie dostosowaną do szerokości zawartości lub pełną szerokość (dla display: block;), odziedziczoną po rodzicu czy początkową. Lub jej bliźniaczą wersją maxwidth, definiującą maksymalną wartość dla podanego elementu. Możemy również użyć własności flex lub jej pochodnych. Wcześniej, trochę nie w pełni, wprowadziliśmy sobie flex. Wypadałoby ją uzupełnić. Mianowicie pełna struktura to flex: flex-grow flex-shrink flex-basis auto initial inherit; Rozbijmy sobie to na poszczególnego elementy. Uwaga: własność flex można łączyć z własnością max-width i width. Flex-grow Definiuje ile miejsca zajmie nasze pudełko. Wcześniej wspominaliśmy o prostym wzorze: szerokość pudełka = (wartość flex-grow / suma wszystkich pudełek) * 100% Flex-shrink Definiuje jak element może się pomniejszyć jeśli to niezbędne. uwaga: internet explorer 10 i wcześniejsze nie wspierają tej własności. Flex-basis Początkowa wartość naszego pudełka, definiuje minimalny rozmiar elementu. Jeśli np. ustawimy go na 80 pixeli w pudełku 1, wrapperowi nadamy 100px szerokości, to mimo użycia na pudełku 2 Wprowadzenie do FlexBox - strona 16

większej wartości flex - nasze pudełko 1 zajmie więcej miejsca (80px) niż pudełka 2. Wymiary mogą być również procentowe. Niestandardowa kolejność elementów Jak wcześniej wspomniałem flex jest kierunko-agnostyczny. Co pozwala nam poprzez własności CSS dokładnie sterować kolejnością wyświetlania elementów niezależnie od ich kolejności w drzewie DOM. Tak więc możemy sprawić by elementy, które zapisane są kolejno jako 1,2,3,4, wyświetliły się jako 3,4,1,2. A wszystko to kryje się za bardzo oczywistą nazwą order (ang. kolejność). Do ustalania kolejności możemy użyć dowolnej liczby całkowitej z zakresu od minus nieskończoności do plus nieskończoności. order: <liczba całkowita>; Dzięki tej prostej funkcjonalności możemy na przykład dynamicznie sortować elementy przy użyciu javascript obniżając cenę operacji na drzewie DOM. Do tej pory zmiana kolejności jednego elementu oznaczało wykonanie jego kopii, wstawienie w miejsce docelowe i usunięcie oryginału. Jakakolwiek operacja na drzewie to duży wysiłek dla przeglądarki. Prawdopodobnie domyślasz się, drogi czytelniku, jak wiele możemy zaoszczędzić wykonując to zmieniając nazwę klasy czy dodając atrybut style dla elementów? Wcześniej przy stu elementach musieliśmy wykonać trzysta ciężkich operacji na drzewie DOM, teraz sto o zdecydowanie niższym znaczeniu. Pozycja elementu w pionie Flex jest stosunkowo sprytnie przemyślany i trzyma się wielu różnych konwencji. Na przykład jeśli już opanowaliśmy układanie całego wiersza w konkretny sposób w pionie - układanie pojedynczych elementów nie powinno stanowić problemu. Użyjemy do tego własności align-self, która zawiera identyczne wartości jak align-items. align-self: auto flex-start flex-end center baseline stretch; align-self: flex-start - przypina element do początku osi poprzecznej, flex-end - przypina element do końca osi poprzecznej, center - centruje element względem osi poprzecznej, stretch - rozciąga element na wysokość osi poprzecznej Wprowadzenie do FlexBox - strona 17

baseline - ustawia element tak aby linia poprowadzona pod pierwszą linią tekstu była wspólna dla wszystkich pudełek. Wprowadzenie do FlexBox - strona 18

Układ typu blog Rozdział 5 Przykład Stwórzmy klasyczny układ, składający się na nagłówek, miejsce na treść, pasek boczny np. z kategoriami i stopkę. Header będzie najprostszy. Opakujemy go we wrapper z własnością display: flex; Następnie chcielibyśmy wstawić w niego logo i nawigację. Na kontener z logo nadamy flex: 1; a na nawigację flex: 7; to powinno w zupełności wystarczyć. Przejdźmy do treści i paska bocznego. Ponownie ubieramy go we wrapper, dodajemy do niego align-items: stretch; i do kolumn stosujemy kolejno flex: 4; i flex: 8;. To sprawi, że treść będzie równej wysokości co sidebar. Z footerem postępujemy identycznie jak z headerem. Wprowadzenie do FlexBox - strona 19

Błędy Rozdział 6 Dodatkowa lektura Niestety, jak to w IT, kod bez błędów to asymptota do której dążymy. Flexbox nie obył się bez tego typu problemów. Najlepszym źródłem informacji na ten temat jest kolekcja flexbugs Philip a Walton i Greg a Whitworth. Znajdziesz ją pod adresem: https://github.com/philipwalton/flexbugs Wsparcie przeglądarek Wsparcie dla nowej wersji składni (tej, którą opisałem w całym poradniku) Chrome Safari Firefox Opera IE Android ios 21+ 6.1+ 22+ 12.1+ 11+ 4.4+ 7.1+ Żeby oddać rozwój flex a poniżej tabelka wsparcia dla starej składni flex, pokroju display: box; jest to składnia z 2009 roku. Chrome Safari Firefox Opera IE Android ios 20-3.1+ 2-21 12.1+ 10 (wersja pośrednia) 2.1+ 3.2+ Wprowadzenie do FlexBox - strona 20

Rozdział 7 Ściąga display: flex flex-direction: row row-reverse column column-reverse; flex-wrap: nowrap wrap wrap-reverse; flex-flow: < flex-direction > < flexwrap > justify-content: flex-start flex-end center space-between space-around; align-items: flex-start flex-end center baseline stretch; order: liczba flex-grow: liczba flex-shrink: liczba flex-basis: liczba px % rem em flex: none [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ] align-self: auto flex-start flex-end center baseline stretch główna własność kontenera. wyświetlanie kolumn, kolejno: lewo do prawej, prawo do lewej, góra dół, dół góra. łamanie wierszy, kolejno bez łamania, łamanie, łamanie + wyświetlanie w odwrotnej kolejności. połączenie dwóch własności w jednej. wyrównanie elementów w poziomie, kolejno: do lewej, do prawej, wyśrodkowanie, odstęp pomiędzy, odstęp dookoła wyrównanie w pionie, kolejno: do góry, do dołu, wyśrodkowanie, pierwsza linia tekstu, rozciągnięcie w pionie. kolejność wyświetlania elementów kolejno adekwatnie do numeru. Wartość to liczba całkowita od minus nieskończoności do plus nieskończoności. rozszerzanie kolumny jeśli niezbędne o wartość liczbową. odwrotność flex-grow. minimalny rozmiar pudełka. połączenie poprzednich własności w jedną. wyrównanie w pionie dla pojedynczych elementów. Zachowanie podobne do align-items. Wprowadzenie do FlexBox - strona 21

Zakończenie Dziękuję za czas poświęcony na lekturę. Mam nadzieję, że jesteś teraz bogatszy o nową wiedzę i już wiesz jak poradzić sobie z flexem. Jeśli wciąż masz jakieś pytania pisz śmiało na krzysiek@sth.io O autorze Krzysztof Węgliński, Frontend Developer z Wrocławia. Kiedy programuje może żyć bez jedzenia i picia. Ma mnóstwo pomysłów jak naprawić świat i podbić kosmos. Przerywa pracę przed komputerem tylko po to żeby pojedzić na rowerze. http://sth.io Wprowadzenie do FlexBox - strona 22