Power of flex – sposoby wykorzystania flex-wrap (css only slider)

Na temat niesamowitych możliwości i super mocy css flex rozpisywałem się już na jednym z wcześniejszych wpisów, w tym artykule skupie się na kolejnej ciekawostce oraz sposobach jak ją można wykorzystać w interesujący sposób.

flex-wrap

Wykorzystując layout dowolnego listingu komponentów opartego na fleksje mamy wiele interesujących opcji zarządzania całym układem. Możemy manipulować ilością kolumn, kolejnością elementów ich rozmieszczeniem itp. Jedną z opcji jest zawijanie elementów jeśli już nie mieszczą się w danym rzędzie. Umożliwia nam to własność flex-wrap która przyjmuje parametry: nowrap, wrap, wrap-reverse, oraz podstawowe initial i inherit.

Opis parametrów

Powyższe parametry umożliwiają nam zmianę układu przy większej ilości elementów w następujący sposób.

Nowrap – w większości wypadków jest wartością podstawową (default), sprawia że elementy na liście są układane obok siebie i nie zawijają się do kolejnych kolumn, jeśli jest ich więcej niż może się zmieścić w view porcie, i wychodzą poza widoczny obszar.

Wrap – umożliwia w przeciwieństwie do nowrap, zawijanie kolejnych elementów do nowych rzędów jeśli nie mieszczą się w jednym. Dzięki czemu mamy dostęp czyli widzimy wszystkie elementy i nie znikają nam żadne poza viewport.

Wrap-reverse – działa na podobnej zasadzie jak wrap, jedyną różnicą jest fak że zawija nam elementy jak by od tyłu. Wyobrazić to sobie można w ten sposób że wrap powoduje przejście elementów niemieszczących się do następnej lini pod aktualnymi elementami, wrap-reverse przenosi elementy do lini nad aktualnymi elementami. Powodując że pierwsza linia z elementami jest ostatnią.

Parametry initial i inherit podobnie jak we wszystkich innych własnościach css, ustawiają wartość na początkową, lub dziedziczą aktualnie ustaloną dla jednego z rodziców w drzewie DOM.

Problemy i rozwiązania

Opisane powyżej opcje rozwiązują pewne problemy jakie możemy mieć z układem naszej listy, ale mogą też powodować kolejne. W zależności od przypadku użycia jaki potrzebujemy lub wymusza na nas projekt. Wykorzystując nowrap pojawia się problem ukrywania elementów nie mieszczących się w rzędzie, niejako zabierając nam do nich dostęp, możemy to naprawić na kilka sposobów i wykorzystać ale o tym troszkę później.
Stosując wrap i wrap-reverse, daje nam dostęp do wszystkich elementów, ale często musimy jeszcze wykorzystać dodatkowe ustawienia aby poprawić wygląd i styl pojedynczych elementów z listy, gdyż przy responsywności strony, na różnych rozdzielczościach, nasz układ może gubić odstępy pomiędzy, bądź idealne proporcje itp.
Dla naprawy tych drobnych błędów stosujemy dodatkowe ustawienia np: justify-content: center;
Centrujemy elementy robiąc nierówne odstępy po bokach kontenera,

Możemy także użyć justify-content: space-between; co spowoduje rozstrzelenie elementów do krawędzi tworząc dziury pomiędzy nimi

Jeśli zależy nam na idealnych odstępach pomiędzy elementami bez dziur, możemy zastosować rozwiązanie wpływające na rozmiary poszczególnych elementów listy, zwiększając/zmniejszając ich rozmiar w miarę możliwości aby dostosować je do kolumny, ale pojawia się problem przy skrajnych elementach że mogą być za bardzo rozciągnięte również psując cały układ.

Kolejnym problemem przy dużych listach powiedzmy 4 kategorii po 20 elementów w każdej, w widoku desktopowym przy 5 kolumnach mamy relatywnie mało strony do przewijania, ale jeśli dla mobile zmodyfikujemy układ na bardziej czytelny z jedną lub dwiema kolumnami, ustawiając im odpowiednie wartości rozmiar w media-queries, bądź zmieniając ułożenie elementów z row na column, strona zmieni się w niekończący się scroll elementów. Dodatkowo jeśli jeszcze nasi użytkownicy będą bardziej zainteresowani (produktami, artykułami) w dalszych kategoriach, ilość elementów do przewinięcia może ich skutecznie odstraszyć od kolejnej wizyty.

Lepszym rozwiązaniem dla samego flex wrap przy układzie opartym na flexie i bardzo dużej ilości elementów jest grid, dzięki czemu mamy bardziej precyzyjne opcje manipulacji poszczególnymi kolumnami, wierszami oraz samymi elementami.

Sprytne rozwiązanie – css slider

Przy pierwotnym układzie flex dla naszej listy, bez zawijania elementów oraz ich dużej ilości, istnieje eleganckie trick który możemy wykorzystać, nie tracąc dostępu do ukrytych elementów. Dodatkowo umożliwi nam on w prosty sposób stworzenie czegoś w rodzaju slidera, do którego zazwyczaj potrzebujemy dodatkowych wtyczek javascriptowych.
Pierwszą rzeczą jaką musimy zrobić, to umożliwić naszemu układowi scrollowanie horyzontalne dodając do naszego kontenera własność overflow-x: auto;

Takie rozwiązanie w pierwszej fazie jest jeszcze mało imponujące i zmienia tylko sam układ dając w miarę użyteczny dostęp do wszystkich elementów niezależnie od rozdzielczości na jakiej przeglądamy nasz projekt. Na desktop możemy przesuwać elementy sówakiem, na mobile działa natywny touch move. Przy wielu kategoriach podobnych list i niezliczonych elementach na nich mamy jeszcze bardziej użyteczny layout bardziej przyjazny użytkownikom, w prosty sposób mogą przeszukiwać interesujące ich materiały bez konieczności przechodzenia przez wszystkie listy od pierwszego do ostatniego elementu (przy wykorzystaniu flex-wrap:wrap;). Proste i efektywne.
Coś co sprawia że nasze rozwiązanie staje się jeszcze bardziej użytecznym i elegancjim to zastosowanie właśności scroll-snap-type: x mandatory; dla kontenera oraz scroll-snap-align: start; dla naszych elementów listy.
Pierwszy parametr odpowiada za wymuszenie osi przyciągania dla elementów podczas scrollowania, kolejny określa jak mają być przyciągane elementy podczas puszczenia scroll.
Oznacza to mniej więcej tyle, że przy drobnym przesunięciu elementów w dowolną stronę, przeglądarka sama sobie dopasuje pozycje scroll’a w taki sposób aby element był przysunięty do jednej z krawędzi, bądź wycentrowany, niezależnie od aktualnej ilości widocznych elementów.

To rozwiązanie w swojej prostocie, jest niemal idealnym odwzorowaniem wszystkich nowoczesnych sliderów wykorzystywanych praktycznie na wszystkich nowoczesnych stronach internetowych, bez konieczności korzystania z dodatkowych biblioteki rozszerzeń i dodatkowego obciążania naszego projektu zbędnymi danymi i opóźnieniami spowodowanymi ich ładowaniem i manipulacją zewnętrzną całym naszym układem. Istnieje jeszcze możliwość dodatkowego usprawnienia, dzięku któremu, paroma linijkami skryptu dodamy funkcjonalność przewijania poprzez kliknięcie w przyciski next prev, bez konieczności stosowania dodatkowych bibliotek.
Jeszcze dla samego upiększenia wyglądu naszego css’owego slidera wystarczy ukryć scrollbar dodając 2 linijki w css dla kontenera scrollbar-width: none; .boxTestRow::-webkit-scrollbar {display: none;}

<a href="#" onclick="scrollPrev(event)" class="btn btn-primary"><</a>
<a href="#" onclick="scrollNext(event)" class="btn btn-primary">></a>
<script>
    function scrollPrev(e, distance=200) {
        document.querySelector('.boxTestRow').scrollBy({left: -distance, behavior: "smooth"});
        return false;
    }
    function scrollNext(e, distance=200) {
        document.querySelector('.boxTestRow').scrollBy({left: distance, behavior: "smooth"})
        return false;
    }
</script>

Podsumowanie

Słowem podsumowanie, niezmiennie architektura layoutu w nowoczesnych stronach internetowych dynamicznie się rozwija i niesie ze sobą coraz to ciekawsze rozwiązania i usprawnienia dla użytkowników. WIąże się to z nieustannym poszukiwaniem i usprawnieniem naszego kodu oraz stosownej adaptacji dla konkretnych przypadków użycia. Całkiem niedawne nowości prawie niemożliwe do pojęcia i wykorzystania (jak dynamicznie ładowane treści i animacje przewijanych elementów – sliderów) aktualnie są na porządku dziennym. Coraz to nowsze projekty i ilości danych które chcemy użytecznie, sprawnie, i przyjaźnie prezentować naszym użytkownikom musimy coraz to bardziej optymalizować dotychczas sprawdzone rozwiązania i zastępować je nowymi bardziej wydajnymi. Jednym z takich usprawnień jest ograniczenie używania/ładowania dodatkowych wtyczek, jak w przykładzie opisanym powyżej, odpowiedzialnych za drobne efekty, które da się rozwiązać w prostszy sposób wykorzystując natywne wsparcie nowoczesnych przeglądarek.