Flexbox: Kierunek i zawijanie wierszy

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

0:04od podstaw poprzednim odcinku dowiedziałeś się że ustawiając właściwość display

0:08flex na dowolnym znaczniku html tak naprawdę ustawiane są

0:12różne inne właściwości css'owe jedną z nich było flex-direction

0:17flex-direction przyjmuje domyślnie wartość row jak

0:21widzisz obecność tej reguły nie wpłynęła zupełnie na renderowanie naszej strony natomiast

0:26przyjmuje też wartości takie jak column i na pierwszy rzut oka widzimy

0:30że elementy są renderowane od góry do dołu natomiast obie

0:34te właściwości mają też swój wariant reverse i na pierwszy

0:38rzut oka widzimy że te elementy są renderowane w przeciwnej kolejności czyli

0:42tak jak były renderowane od lewej do prawej to dla row-reverse

0:47są renderowane od prawej do lewej i analogicznie sytuacja ma się

0:51do column-reverse gdzie elementy są renderowane

0:55od dołu do góry w przeciwieństwie do kolumn gdzie jest to od

0:59góry do dołu tak to wygląda na pierwszy rzut oka a ja teraz przedstawię ci

1:03jak działa mechanika pod spodem która definiuje że elementy są ustawiane

1:07w ten sposób więc wrócimy do początkowej wartości flex-drirection row

1:11i zobaczmy tutaj w podglądzie wedle jakich

1:17osi renderowane są te flex item'y wewnątrz kontenera który ma

1:21na sobie display flex jak widzisz mamy tutaj oś main axis

1:25i cross axis naszą main axis w tym momencie jest oś x i

1:29naszą cross axis jest oś y czyli tutaj elementy są

1:33układane od lewej do prawej ponieważ zwrot tej osi jest skierowany

1:37w prawą stronę ekranu i tutaj oś cross axis

1:41czyli oś y w tym momencie jest skierowana w dół moglibyśmy to zaobserwować

1:45gdybyśmy ustawili na flex-wrap na wrap i

1:50wtedy faktycznie widzimy że elementy kiedy nie mieszczą się już w szerokości

1:54naszego z view portu to są przerzucone w dół wzdłuż osi

1:58cross axis noa teraz co stanie się w

2:03momencie kiedy zmienimy właściwość flex-direction z row

2:07na właściwości flex-direction row-reverse oczywiście

2:11wygląda to tak jakby elementy zostały numerowane od

2:15największej do najmniejszej natomiast tak naprawdę elementy zostały po prostu

2:19renderowane od prawej do lewej zobacz że zwrot osi main axis

2:23jest skierowany w tym momencie ku lewej stronie ekranu a

2:28sama oś cross axis nie uległa żadnej zmianie

2:32co w przypadku kiedy ustawimy flex-direction na column zobacz

2:39że w tym momencie nasza oś główna main axis zmieniła

2:43się i nie jest to już oś x tylko jest to w tym momencie oś y

2:47i tak samo analogicznie osią przeciwstawną osią cross axis

2:51została oś x czyli w tym momencie jeżeli ustawimy

2:57flex-wrap na wrap to elementy

3:01w momencie nie będą się mieścić w wysokości viewport'u ponieważ

3:05oś główna to w tym momencie oś y to

3:10gdy będziemy zmniejszać rozmiar tego viewpor'u to zobacz

3:14że więcej i więcej elementów będzie układane wzdłuż osi x

3:19jeśli zmniejszymy to jeszcze troszkę to widzimy że flexbox ustawił

3:23to już nam na 3 kolumny ponieważ ustawiliśmy flex-direction na column

3:27natomiast jeśli wrócimy do wysokiego viewport'u to

3:33elementy znów układają się w mniejszą ilość linii pozbędziemy

3:38się tego flex-wrap jeszcze w tym momencie i zobaczymy jak wygląda

3:42sytuacja z column-reverse i analogicznie

3:47do sytuacji z flex-direction row elementy są układane w tym momencie wzdłuż

3:51osi main axis i podążają zgodnie z kierunkiem danej

3:55osi czyli innymi słowy flex-direction definiuje która z osi

4:00x czy y jest osią main axis i na tej podstawie również

4:04decyduje którą osią jest oś cross axis ponieważ

4:08jeśli ustawiliśmy flex-direction column bądź column-reverse automatycznie

4:12oś x stała się osią cross axis no jeśli wrócimy do sytuacji

4:17z row to osią przeciwstawną

4:21jest oś pionowa ponieważ main axis jest osią x w

4:25takim razie możemy dojść do wniosku że ustawienie pierwszego członu wartości

4:29flex-direction definiuje nam czy osią main axis będzie

4:34oś pozioma czy oś pionowa

4:38natomiast obecność sufiksu reverse bądź

4:43jego brak definiuje kierunek głównej osi to znaczy domyślnie column ma

4:48kierunek ustawiony z góry na dół natomiast jeśli ustawimy column-reverse

4:52to kierunek jest odwrotny czyli z dołu do góry i analogicznie

4:57dla row-reverse jest to od prawej do lewej czyli za

5:01pomocą jednej właściwości i tylko czterech wartości którymi flex-direction

5:05dysponuje możemy całkowicie zmienić sposób renderowania

5:09naszej witryny przejdźmy więc w tym do flex-wrap

5:13flex-wrap domyślnie

5:18posiada wartość nowrap i dlatego w tym momencie elementy

5:22kurczą się aby mogły się zmieścić w jednej linii flexa

5:26dzieje się to też za sprawą właściwości flex-shrink o której

5:30opowiem później następnych rozdziałach natomiast to że ustawiliśmy

5:34nowrap nie pozwala flexowi ustawiać elementów

5:38wzdłuż osi cross axis zwykłe ustawienie flex-wrap na

5:42wartość wrap już umożliwia nam zawijanie się elementów do

5:46następnego wiersza wzdłuż cross axis czyli jeżeli teraz zmienimy

5:51sobie row-reverse na column no

5:55to od razu zawijanie wierszy również zmienia kierunek ale

5:59zauważ że używając flex-direction nie mamy pełnej kontroli nad osią cross

6:03axis to znaczy oczywiście definiujemy która oś powinna

6:08być osią główną a która osią przeciwstawną natomiast nie mamy kontroli nad kierunkiem

6:14osi przeciwstawnej i analogicznie do wartości flex-direction flex-wrap

6:19posiada właściwość wrap-reverse tak jak

6:23właściwość flex-wrap ustawiona na wartość wrap umożliwia

6:27zawijanie elementów do następnego wiersza tak flex-wrap reverse

6:32robi dokładnie to samo tylko że jednocześnie odwraca kierunek

6:36osi przeciwstawnej to znaczy elementy zaczynają

6:40się renderować w tym momencie od prawej do lewej ponieważ naszą

6:45osią main axis jest teraz oś y za sprawą flex-direction

6:49column i gdy będziemy zmniejszać wysokość viewportu

6:53to elementy będą zawijać się w lewo zamiast w prawo jak to wyglądało

6:57w sytuacji gdy ustawiliśmy flex-wrap na wrap i

7:04analogicznie w przypadku flex-direction row elementy są zawijane

7:09domyślnie od góry do dołu natomiast wstawienie wartości wrap-reverse

7:14odwraca ten proces i elementy są renderowane od

7:19dołu do góry warto też zauważyć że operujemy

7:23tylko w samym css'ie nie dotknęliśmy ani na chwilę naszego markup'u te

7:27elementy dalej są w tej samej pozycji są numerowane za pomocą css

7:32counters ale sam css zmienia sposób w którym

7:36miejscu dany element będzie widoczny na stronie może prowadzić to

7:40do różnych problemów z accessibility o tym na pewno jeszcze wspomnę w kolejnych

7:44lekcjach z tego kursu natomiast to co musisz zapamiętać z tej konkretnej lekcji

7:49to to że mamy dwie osie oś główną i

7:53oś przeciwstawną flex-direction definiuje czy to oś x czy oś y powinna

7:57być główną osią i automatycznie definiuje też która z tych osi jest

8:01osią przeciwstawną za pomocą sufiksów reverse na

8:05flex-direction możemy kontrolować kierunek osi

8:10main axis a za pomocą sufiksu reverse na flex-wrap kontrolujemy

8:14kierunek osi cross axis dobre zrozumienie tego

8:18jak działają osie we flexboxie jest kluczem do tego aby korzystać z niego

8:22w sposób efektywny dlatego polecam ci spędzić troszkę czasu nad

8:27tym aby to dobrze zrozumieć i dopiero wtedy przejść do następnych lekcji kursu

8:31ponieważ więcej i więcej właściwości powiązanych z flexboxem

8:35będzie opierało się właśnie na tych dwóch osiach to

8:40wszystko w tym momencie na temat osi we flexboxie natomiast w kolejnej lekcji dowiesz

8:45się jak pozycjonować dzieci flexboxa względem

8:50main axis bądź cross axis