Flexbox: Rozszerzanie się elementów

0:00Cześć witam cię w kolejnej lekcji kursu flexbox

0:04od podstaw i w tym konkretnym nagraniu opowiem troszkę o tym jak zarządzać rośnięciem

0:09elementów flexbox na każdym elemencie który jest pozycjonowany przez

0:13fletboxa czyli jest bezpośrednim dzieckiem kontenera który

0:17ma na sobie ustawione display flex możemy używać właściwości takiej jak flex-grow

0:22i flex-grow domyślnie przyjmuje wartość 0 i

0:26właściwość ta określa stosunek wzrostu dzieci tego konkretnego

0:31kontenera względem siebie co to znaczy ustawmy na wszystkich

0:35znacznikach o klasie card flex-grow na 1 ponieważ

0:39flex-grow przyjmuje wartości numeryczne całkowite

0:43nieujemne i zobacz że wszystkie elementy rozszerzyły się

0:47tak aby zajmować się jak najwięcej miejsca w danej linii to

0:51znaczy pierwsze cztery elementy rozszerzyły się tylko

0:56troszkę ponieważ są w niej aż cztery elementy natomiast elementy

1:01z drugiej linii rozszerzyły się o wiele bardziej ponieważ miały po prostu więcej miejsca

1:05jeśli teraz rozszerzymy nasz viewport to

1:10zobacz że w zależności od tego jak dużo elementów znajduje

1:15się w danej linii flexboxa tak bardzo konkretne

1:19karty będą nam się rozszerzać jeśli będziemy manipulować

1:23teraz rozmiarem tego viewport'u to zobacz że każda z kart

1:28zajmuje bardzo dużo przestrzeni natomiast dalej respektują

1:32one tutaj ten margines który ustawiliśmy im na początku czyli

1:365 pikseli z lewej i 5 pikseli z prawej i jako że elementy

1:41rozszerzają się w tym momencie na całą szerokość

1:45kontenera do tego justify-content ustawionego

1:50na center już w tym momencie tak bardzo nie widać ponieważ elementy

1:54zajmują całą dostępną przestrzeń czyli jeśli wstawimy tutaj flex

1:59start to tak naprawdę nie widać różnicy

2:04ponieważ justify-content tak jak inne właściwości flexboxa

2:08operuje na dostępnej przestrzeni jeśli nie mam dostępnej

2:13przestrzeni no to nie będziemy widzieli efektu danej właściwości

2:17natomiast dlaczego

2:21wstawiliśmy tutaj 1 jak już wspomniałem flex-grow jest

2:26to stosunek rozmiarów elementów flexboxa

2:30czyli innymi słowy ustawiając flex-grow na

2:34wszystkich znacznikach kart i ustawiając to na wartość inną niż zero

2:39czyli ustalamy że wszystkie elementy mają rosnąć w jakimkolwiek stopniu mówimy

2:44że każda z tych kart powinna urosnąć i każda z tych kart powinna

2:48urosnąć o tyle samo czerpiąc z dostępnej przestrzeni w

2:53danej linii aby to lepiej zobrazować

2:57przywrócę tutaj wartość domyślną flex-grow na zero i na konkretnej

3:01karcie powiedzmy że w tym momencie na pierwszej ustawie

3:10flex-grow na 1 i zwróć uwagę że pozostałe

3:14elementy które nie mają ustalonego tego flex-grow 1 zupełnie nie urosły

3:19zostały w takich samych rozmiarach jakie miały ustawione początkowo

3:23za pomocą flex-basis natomiast pierwsza karta zajęła

3:27całą dostępną przestrzeń jeśli wpiszemy tutaj

3:31w tym momencie tylko na tym konkretnym selektorze czyli na pierwszej karcie wartość większą

3:36niż 1 to rozmiar tej karty się nie zwiększy ponieważ

3:40flex-grow definiuje stosunek rozmiarów ustawiając

3:45flex-grow na 1 tylko na jednym elemencie mamy pewność

3:49że zajmie on tak dużo przestrzeni jak będzie tylko dostępne

3:54i nie będzie mógł się bardziej rozszerzyć natomiast jeśli ustawimy

3:58flex-grow na 1 dla pierwszej

4:03karty i załóżmy dla drugiej karty flex-grow

4:13na 3 to teraz już widać tą różnicę wielkości ponieważ

4:18i pierwsza i druga karta mają

4:22powiększyć się o tą nadmiarową przestrzeń którą widzimy

4:26tutaj na drugiej linii flexboxa natomiast karta

4:31druga powinna zabrać 3 razy więcej tej przestrzeni niż

4:35karta pierwsza i tutaj też trzeba zauważyć że ustawiając

4:40flex-grow na 3 na karcie numer 2 i

4:44flex-grow 1 na karcie numer 1 nie

4:49mamy gwarancji że karta numer 2 będzie 3

4:53razy większa niż karta numer flexbox dysponuje tylko

4:57tą przestrzenią która jest dostępna w danej linii dostępna

5:02to znaczy nie zajęta przez rozmiary danej

5:06karty wzdłuż osi main axis wliczając

5:10w to margines tej konkretnej karty więc

5:14więc może ja zamienię justify-content na flex-start

5:18na momencik i teraz już troszkę lepiej widzimy jaką przestrzenią dysponujemy

5:23tak naprawdę karta pierwsza i druga dysponują zaledwie około

5:2770 pikselami o które mogą się powiększyć

5:31tutaj z rozszerzenia dimensions pokazuje mi 75 natomiast ja

5:35odejmuję te 5 pikseli ponieważ karta numer 6 ma również swój margines

5:39z prawej strony o wartości 5 pikseli więc zostaje

5:43nam tutaj do dyspozycji tylko 70 pikseli i te 70 pikseli

5:47jest rozdystrybuowane pomiędzy karty

5:51pierwszą i drugą w taki sposób aby karta druga

5:56otrzymała 3 razy więcej tej przestrzeni niż karta

6:00pierwsza czyli jeśli wyłączymy

6:04chwilowo flex-grow na obu tych znacznikach to widzimy że faktycznie karty

6:10rozszerzają się tylko o tyle o ile pozwala

6:14na to przestrzeń w danej linii flexboxa i

6:20oczywiście flex-grow działa wzdłuż osi main axis

6:25czyli tylko i wyłącznie zmieniając właściwość flex-direction

6:29na column zmieniamy sposób

6:35w jaki elementy będą rosły teraz flex-grow nie działa już

6:39wzdłuż osi poziomej działa wzdłuż osi pionowej osi y ponieważ

6:44zmieniliśmy naszą główną oś na oś pionową

6:48można flex-grow traktować jako takie align-items

6:52czy align-content dla osi main axis ponieważ mamy możliwość

6:57rozszerzenia konkretnych elementów wzdłuż osi podstawowej ale

7:02nie powinniśmy myśleć o flex-grow że rozszerza nam

7:06szerokość bądź wysokość danego elementu tylko powinniśmy myśleć

7:10właśnie w kontekście osi jak całym flexboxie ja tu jeszcze zaprezentuję

7:14jeden ciekawy przykład co można zyskać korzystając z właściwości flex-grow

7:19i ustawię że na każdej karcie która

7:25ma na sobie kursor ustawimy flex-grow na

7:311 możemy tutaj też przywrócić justify-content na center

7:36i teraz w momencie gdy

7:41najedziemy na daną kartę to widzimy że ona się rozrośnie tak

7:46aby zajmować maksymalną domyślną przestrzeń natomiast

7:50taka skokowa zmiana wartości dla szerokości elementu

7:54nie jest zbyt estetyczna więc możemy skorzystać z właściwości transition

7:58i ustawić na głównym selektorze kart transition

8:02flex-grow powiedzmy

8:07na trzy setne sekundy jako timing function

8:11podając ease-in-out

8:18i teraz jeśli najedziemy na konkretny na konkretną kartę

8:22będziemy mieli ładną animację rozszerzania się

8:29co na pewno będzie bardzo estetycznym dodatkiem dla nowoczesnych

8:33layoutów flex-grow pozwala na przestanie korzystania

8:37tak bardzo z wartości procentowych na rzecz proporcji

8:42jakie dane elementy mogą między sobą mieć w konkretnej

8:46linii flexboxa poeksperymentuj z flex-grow na różnych

8:50znacznikach z różnymi wartościami oraz z różnymi osiami

8:55ustawionymi jako oś podstawowa nie przejmuj się jeśli nie

8:59wydaje ci się to bardzo intuicyjne po tych kilku minutach wprowadzenia

9:04ponieważ flex-grow jest to jedna z najbardziej skomplikowanych właściwości

9:09które spotkasz we flexboxie jeśli ją zrozumiesz to na pewno

9:13już wkrótce cały flexbox nie będzie ci straszny