Tydzień 39

Flex ostatecznie przekonał mnie do siebie. Nie wiem czemu, po pierwszym spotkaniu z narzędziem CSS o nazwie Flex-box miałem negatywne odczucia. Nie wiem z czego to wynikało. Może nie zrozumiałem jak flexa można wykorzystać, może nie zrozumiałem jak flexa używać. Narzędzie poznałem, ale wykorzystywać nie chciałem. W tym tygodniu to się zmieniło.

Zaczęło się od rozdziału poświęconego Flex-Box w kursie Advanced CSS, który aktualnie przerabiam. Początkowo chciałem ten rozdział przeskoczyć, ale potem przyszła myśl, że nie jest ważne to czy jakieś narzędzie lubię, czy nie muszę wiedzieć jak z niego korzystać. Okazało się, że Jonas Schmedtmann potrafi do mnie świetnie trafić. Pięć godzin materiału wideo i zrozumiałem jak to działa i jak można wykorzystać możliwości flexa bez szarpania się z kodem.

Na początku tygodnia zakodowałem przykładowy projekt z kursu, a w drugiej połowie tygodnia zasiadłem do projektu strony www mojej córki. Pomijając etap projektowania strony, który okazał się długi i żmudny (dobrze, że na świecie żyjąc ludzie chcący zajmować się UI/UX) do budowy layoutu strony wykorzystałem głównie flex-boxa. Dzięki temu dodanie responsywności zajęło pół godziny i to tylko dlatego, że na desktopie poszalałem z układem zdjęć w jednej sekcji i koniecznie chciałem przenieść ten układ na mobile. Ostatecznie stwierdziłem, że zajmie to zbyt dużo czasu i poniżej granicznej wielkości ekranu po prostu ładuje się jedno zdjęcie, zamiast kilku.

Korzystając z długiego obcowania z flex-boxem w tym tygodniu postanowiłem wrzucić tu małe podsumowanie tego jak korzystać z tej własności.

Zacząć należy od zrozumienia, na jakie elementy „oddziałuje” flex-box. Właściwość display: flex ustawiamy w elemencie nadrzędnym, a właściwość obejmie wszystkie bezpośrednie dzieci tego elementu. Flex nie będzie oddziaływał na elementy zawarte w komponentach podrzędnych dzieci w tym sensie, że ustawi na stronie układ dzieci, ale nie elementów wewnątrz dzieci. To specyficzność wywołała u mnie początkowo największą konsternację. Głównie dlatego, że w pierwszej chwili nie wiadomo jak ustawić elementy w komponentach wewnętrznych. W praktyce bez problemu można ustawić display: flex w elemencie nadrzędnym, a następnie ponownie display: flex w elemencie podrzędnym, jeżeli chcemy w nim również wykorzystać flexa.

W drugim kroku, żeby nie być zaskoczonym, jak flex ustawi elementy na stronie, trzeba zrozumieć czym jest flex-direction i jak działa. Flex-direction należy rozumieć, jak strzałkę wskazującą kierunek układania elementów podrzędnych. Domyślnie kierunek ustawiania elementów jest od lewej do prawej. Można go zmienić, na odwrotny kierunek za pomocą row-reverse. Inną możliwością jest ustawianie elementów w kolumnach. Jeżeli chcemy, żeby elementy układały się jeden pod drugim korzystamy z flex-direction: column. Na koniec mamy możliwość ustawienia elementów w kolumnach w odwróconej kolejności: column-reverse. Gdyby z jakichś powodów konieczne było ustawienie elementów w innej kolejności niż to wynika z umiejscowienia ich w kodzie html, zawsze możemy użyć właściwości order. Domyślna wartość to zero. Im wyższa wartość tym bliżej początku zostanie umieszczony taki element.

Elementy można ustawiać wzdłuż poszczególnych osi:

  • Justify-content – układa elementy wzdłuż osi flex-direction;
  • Align-content – układa wierszy lub kolumn wzdłuż osi przeciwnej do flex-direction;
  • Align-item – układa elementy wzdłuż osi przeciwnej do flex-direction;
  • Align-self – ułożenie pojedynczego elementu wzdłuż osi przeciwnej do flex-direction.

Właściwości wymienione powyżej, to prawdziwa magia flex-boxa. Pozwalają bardzo szybko w niemal dowolny sposób zorganizować treści w danym komponencie lub na całej stronie. Poza tym flex-box ma kilka ustawień, które pozwalają na uzyskanie efektu resposywności w pewnym zakresie rozdzielczości ekranu.

Flex-wrap – pozwala nam zdecydować, czy elementy w danym komponencie mają się zawijać. Właściwość ta zawsze uzupełni dany wiesz elementami w takiej ilości w jakiej te komponenty się zmieszczą, a kolejne umieści w następnym wierszu, jeżeli tylko ustawimy właściwość flex-wrap: wrap.

Kolejne dwie właściwości pozwalające uzyskać efekt responsywności to flex-grow i flex-shrink. Pierwsza określa, czy i z jakim priorytetem dany element może rosnąć w obrębie dostępnego miejsca, a druga właściwość określa czy i z jakim priorytetem dany element może maleć. Uzupełnieniem tych elementów jest właściwość flex-basis stanowiąca o tym, jaki rozmiar ma zająć dany element podstawowo. Można ustawić flex-basis w procentach, wtedy dany element będzie zajmował określony procent dostępnej przestrzeni.

Jak widzisz flex-box to potężne narzędzie znacznie ułatwiające układanie elementów na stronie. U mnie początkowa niechęć zamieniła się w fascynację i szczerze polecam korzystanie z możliwości jakie daje flex, zwłaszcza biorąc pod uwagę ile czasu można zaoszczędzić dzięki temu.

Jak już wspomniałem we wstępie w tym tygodniu królował u mnie Flex. Na oswojenie się z Flexem potrzebowałem sześć i pół godziny, kolejne dziewięć godzin zajęło mi budowanie strony dla córki, z czego trzy i pół godziny pochłonął projekt. W przyszłym tygodniu zaprzyjaźnię się bardziej z gridem i mam nadzieję, że dzięki tym dwóm narzędziom budowa każdego layoutu strony będzie dla mnie możliwa.

No comments
Krzysztof NyrekTydzień 39

Related Posts

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *