Zrozumieć Flexboxa
Podsumowanie kursu
Cześć, cieszę się, że dotarłeś do końca tego kursu!
Jak zapowiadałem, zrobimy sobie małą powtórkę wszystkich wymienionych właściwości oraz udostępnię Ci możliwość samodzielnego stworzenia przedstawionego designu od zera, tak, abyś miał do dyspozycji kod, który stworzyliśmy w poprzednim rozdziale.
Właściwości kontenera / rodzica
- display: flex / inline-flex - ustawia element jako kontener flexa
- flex-direction - definiuje kierunek w którym zwrócone jest main-axis
- flex-wrap - ustala, czy elementy mają być zawijane do następnych linii oraz ustala kierunek cross-axis
- justify-content - zarządza dostępną przestrzenią w main-axis i pozycjonuje dzieci na jej podstawie
- align-content - zarządza przestrzenią w cross-axis i pozycjonuje linie flex-boxa na jej podstawie
- align-items - zarządza przestrzenią w cross-axis dla pojedynczej linii flexboxa
- flex-flow - skrót dla właściwości flex-direction oraz flex-wrap
Właściwości elementu / dziecka flexboxa
- align-self - ustala położenie elementu względem cross-axis w linii flex-boxa w której się znajduje
- order - definiuje priorytet kolejności wyświetlania się danego elementu bez względu na pozycję w markupie
- flex-shrink - ustala współczynnik kurczenia się danego elementu
- flex-grow - ustala współczynnik wzrostu danego elementu
- flex-basis - ustala bazowe wymiary elementu względem main-axis, zanim transformacje spowodowane przez inne właściwości flexa będą miały miejsce
- flex - shorthand do ustalania flex-grow, flex-shrink oraz flex-basis. W zależności od ilości wartości jaką mu przekażemy będzie ustalał inne właściwości
Samodzielne tworzenie layoutu
Ponownie zamieszczę screen z designem - niestety, obrazek w formacie png musi Ci wystarczyć. W razie czego posiłkuj się kodem, który wyprodukowałem w poprzednim rozdziale (znajdziesz go również poniżej).
W tym miejscu możesz samodzielnie zakodować przedstawioną stronę:
A tutaj znajdziesz przykład który przygotowałem w rozdziale szóstym:
Czyli jeśli chcesz podpatrzeć jak wyglądało to w moim przykładzie - przewiń sekcję z treścią w dół, a jeśli chcesz kontynuować - wróć do góry.
Staraj się używać notacji skróconych, czyli właściwośći flex oraz flex-flow, wydzielaj powtarzające się style do ogólnych selektorów a reguły współdzielone postaraj się wydzielić do pliku global.css. Eksperymentuj też z kodem HTML, możesz dodać kontenery na niektóre elementy w stopce, czy dodać media queries, na temat których też stworzę wkrótce poradnik.
Gdy skończysz, możesz jeszcze zagrać w Flexbox froggy - grę w której musisz ułożyć żabki na lilie wodne odpowiedniego koloru przy pomocy reguł powiązanych z flexem.
To chyba tyle, życzę miłej zabawy i mam nadzieje, że CSS Flexbox nie będzie już dla Ciebie większym wyzwaniem.
Podziękowania
Jeszcze raz dzięki za uwagę. Jeśli uważasz, że ten poradnik był dla Ciebie przydatny - proszę, daj znać w komentarzu na dole witryny, zasubskrybuj nasz kanał na YT oraz dziel się z innymi linkiem do tego kursu. Pierwotnie miał być on kursem płatnym - jednak uznaliśmy, że lepiej będzie podzielić się nim z światem w takiej formie, jaką widziałeś. To byłaby najlepsza nagroda za poświęcony przeze mnie i resztę ekipy koduje czas. :)
Jeśli zainspirowałem Cię w jakikolwiek sposób i ten kurs będzie motywacją do powstawania poradników Twojego autorstwa - będę wniebowzięty. Sieć - w tym nowe pokolenia web developerów - potrzebuje tego typu treści.
Chciałbym jednak prosić o uszanowanie praw autorskich, które w ostatnim czasie były niejednokrotnie naruszane przez osoby uczące się z materiałów Koduje. Przypisywanie sobie cudzej pracy, kopiując przy tym całe akapity oraz snippety podchodzi pod plagiat drugiego bądź nawet trzeciego stopnia. W takich wypadkach, proszę skontaktuj się ze mną bądź umieść stosowną informację w swoim wpisie, bądźmy fair wobec siebie. :)
Jeśli jesteś zainteresowany/zainteresowana współpracą, niezależnie czy od tego czy jesteś osobą prywatną czy reprezentujesz daną firmę - zapraszam do kontaktu bezpośrednio do mnie na wojciech.polowniak@gmail.com.