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

Leave a Reply

Your email address will not be published. Required fields are marked *