0:00 / 0:00

Flexbox: Kurczenie się elementów

od Podstaw

4 godz. 7 min · HTML i CSS · Full-stack i Programowanie

Wojciech PołowniakSr. Fullstack Engineer

Czego się nauczysz

Omówienie podstaw pracy z flexboxem
Pojęcie osi i kierunków
Różne sposoby renderowania treści
Kurczenie i rozszerzanie się elementów
Wsparcie między przeglądarkami
Przedstawienie problemów z dostępnością
Dodatkowe materiały do poszerzania swojej wiedzy

Szczegółowo opisana mechanika działania flexboxa

Flexbox nie jest trudny - pod warunkiem, że rozumiemy dlaczego elementy renderują się w konkretny sposób. Do tego potrzebna jest szczegółowa wiedza o osiach flexboxa, o tym jak ustalane są ich kierunki i jak elementy będą układać się wzdłuż nich.Dopiero wtedy dobrze można zrozumieć jak działa rozszerzanie i kurczenie elementów, jak elementy będą zachowywać się przy zmianie rozmiaru okna przeglądarki czy przy przełączaniu wyświetlania z układu wierszy na kolumnowy. To wszystko oraz kilka innych mechanizmów ukrytych we Flexboxie znajdziesz dokładnie wyjaśnione w tym kursie - podgląd przykładów czy dodatkowe quizy po zakończeniu kursu pomogą w utrwaleniu zdobytej wiedzy.

Problemy z dostępnością

Wielu developerów nie jest świadomych, że korzystanie z niektórych właściwości Flexboxa wpływa na dostępność naszych stron WWW - dostosowywanie naszych witryn pod czytniki ekranowe oraz użytkowników korzystających z witryn w sposób niestandardowy to temat który zyskuje na coraz większej popularności (zwłaszcza, jeśli planujesz kiedyś tworzyć strony rządowe - te są zobligowane do tworzenia stron dostępnych dla osób niepełnosprawnych).W tym kursie, dowiesz się jakie problemy może nieść za sobą używanie flexboxa i jak ich unikać.

Dla kogo jest ten kurs?

Kurs ten jest dla wszystkich osób, które dobrze czują się z CSS - wystarczy podstawowa umiejętność pisania selektorów. Nie ma żadnych wymagań dotyczących JavaScript, czy znajomości konkretnych frameworków. Natomiast jeśli do tej pory korzystałeś/aś z innych, starszych technologii do pozycjonowania elementów i chcesz nauczyć się prostszej, dobrze wspieranej współczesnej technologii - nie trać czasu! Flexbox to idealne wprowadzenie do kolejnych sposobów pozycjonowania jak np. CSS Grid.

0:00Cześć witam cię w kolejnej lekcji z kursu flexbox od podstaw w poprzednim

0:04nagraniu opowiedziałem ci jak działa flex-grow i

0:08w tej lekcji poznasz bardzo podobną właściwość którą

0:12jest flex-shrink i flex-shrink tak samo jak flex-grow jest

0:17właściwością która działa na dzieciach flexboxa

0:21wartością domyślną dla flex-shrink jest

0:26wartość 1 czyli w przeciwieństwie do flex-grow flex-shrink

0:31jest zaaplikowane do wszystkich dzieci flex boxa równej proporcji natomiast

0:37co robi flex-shrink flex-shrink odpowiada za to że jeśli że

0:42jeśli nie zmienimy domyślnej wartości dla flex-wrap czyli zostawimy ją

0:46na nowrap to elementy pomimo tego że nie

0:50będą zawijały się do następnych linii będą mieściły

0:55się w pojedynczej linii flexboxa czyli flex-shrink

0:59definiuje jak bardzo dany element powinien kurczyć

1:04się w stosunku do innych jeśli jest za mało miejsca w tej

1:08konkretnej linii flexboxa no i możemy to analogicznie sprawdzić tak

1:13jak ustaliliśmy flex-grow dla wszystkich elementów i wtedy one rozszerzały

1:17się na całą szerokość linii to tutaj możemy ustawić

1:21flex-shrink na 0 i zobaczymy że elementy

1:26dalej są renderowane w jednej linii natomiast

1:31nie skurczyły się ani trochę mają ustawioną swoją domyślną szerokość ustawioną

1:35za pomocą flex-basis czy za pomocą właściwości width i

1:39po prostu elementy które nie mieszczą się już na ekranie są

1:44schowane za częścią kontenera która jest dostępna przy przescrollowaniu

1:48wzdłuż osi poziomej czyli jeśli ustawimy

1:52sobie flex-shrink na domyślnie jeden dla wszystkich natomiast

1:58dla pojedynczej karty na przykład powiedzmy

2:03tym razem piątej ustawimy flex-shrink na

2:100 to zobacz że karta piąta ani

2:14troszkę nie skurczyła się to wszystkie pozostałe karty

2:18wzdłuż tej konkretnej linii flexboxa zmniejszyły

2:23się natomiast zmniejszyły się tak bardzo aby nie

2:27wpłynąć na rozmiar karty numer 5 i żeby zmieścić

2:31się z pozostałymi elementami które

2:35mają flex-shrink włączony jeśli natomiast na karcie

2:40numer 3 ustawimy

2:49flex-shrink na 2 to ta karta

2:53będzie kurczyć się dwa razy bardziej niż te karty

2:57które mają na sobie flex-shrink 1 jest

3:01to bardzo przydatna właściwość ponieważ często gdy tworzymy responsywne

3:06layouty nie chcemy aby dany element kurczył

3:11się nawet jeśli kontener się kurczy wtedy

3:16możemy ustawić właśnie na tym konkretnym elemencie flex-shrink na

3:200 i wtedy to inne elementy wewnątrz tego kontenera będą

3:24się kurczyć a nie ten konkretny element oczywiście flex-shrink

3:29zadziała również jeśli ustawimy flex-wrap na wrap

3:34natomiast zadziała to tylko wtedy jeśli w danej linii flexboxa

3:38będzie już tylko jedna karta aby

3:44to zasymulować możemy ustawić flex-basis powiedzmy

3:49na 400 to te elementy dalej

3:53będą się tutaj kurczyć i nie będziemy mieli tutaj

3:58scrollowalnej sekcji więc flex-basis aplikowany jest wtedy

4:03kiedy w danej linii flexboxa nie mieszczą się już poszczególne

4:07elementy jeśli mamy ustawione flex-wrap to flex-shrink

4:11działa tylko wtedy jeśli mamy jeden element na linie domyślnie jest

4:15ustawione na 1 czyli każdy

4:20element który jest pozycjonowany wewnątrz kontenera o własności

4:24display flex będzie się kurczył chyba

4:28że jawnie podamy mu że ma tego nie robić flex-grow

4:33i flex-shrink są bardzo podobnymi właściwościami ponieważ

4:37obie operują na proporcjach w stosunku

4:42do swojego rodzeństwa więc jeśli zrozumiałeś flex-grow to

4:46również flex-shrink nie powinno być w tym momencie problemem poćwicz

4:50i do usłyszenia w kolejnej lekcji