Flexbox: Wyrównywanie względem głównej osi

0:00Cześć witam cię bardzo serdecznie w kolejnym odcinku kursu flexbox

0:04od podstaw w poprzednim odcinku przybliżyłem jak działają osie

0:08we flexboxie to znaczy że mamy oś główną i oś przeciwstawną

0:12i w zależności od tego jakie wartości nadamy na flex-direction i flex-wrap

0:17to albo oś pionowa albo oś pozioma będzie

0:21osią main axis i osią przeciwną do niej jest oś

0:25cross axis i teraz jak mamy już to podstawowe pojęcie o osiach

0:29możemy zacząć układać elementy wzdłuż nich na

0:34elemencie który ma ustawione display flex możemy używać takiej właściwości jak justify-content

0:39i justify-content przyjmuje domyślnie

0:43wartość flex-start dlatego przełączanie

0:47tej reguły nie wpływa zupełnie na renderowanie naszej witryny i

0:52co znaczy to flex-start otórz domyślnie flex-direction jest

0:56ustawione na wartość row dlatego osią główną osią main

1:00axis jest w tym momencie oś pozioma i domyślnie

1:05elementy układane są w kierunku prawym ponieważ nie mamy tutaj sufiksu

1:09reverse na flex-direction i justify-content o

1:14wartości flex-start mówi nam tyle że wszystkie

1:18elementy wszystkie karty powinny zostać ustawione na

1:22początku osi main axis to znaczy jeśli teraz

1:26przełączymy flex-direction na row-reverse to

1:31zobacz że elementy faktycznie układają się na początku osi main axis

1:35ponieważ tu jest koniec tej osi ona zamierza w tym kierunku a

1:40elementy układane są na jej początku czyli analogicznie jeśli

1:44zmienimy wartość tej właściwości na flex-end to sytuacja

1:48się odwróci w tym momencie jeśli na flex-direction row

1:52ustawimy również justify content flex-end

1:57to elementy będą układane na końcu osi main axis

2:02jeśli odwrócimy kierunek osi z prawej na lewo to

2:09elementy będą układały się od lewej do prawej ponieważ w tym momencie oś

2:13skierowana jest w lewo jak to będzie wyglądało w przypadku column

2:18i column-reverse otóż domyślnie jeśli ustawimy flex-direction

2:22na column i ustawimy wartość domyślną justify-content na flex-start to

2:26elementy układane są od góry do dołu ponieważ kierunek osi main axis

2:31jest skierowany w dół jeśli zmienimy

2:35to na flex-end to elementy będą

2:39dociągnięte do końca osi to znaczy elementy dalej są numerowane od

2:44góry do dołu natomiast w tym momencie są dociągnięte do końca

2:48osi no i oczywiście jeśli odwrócimy flex-direction na

2:52column-reverse no to w tym momencie elementy będą układane od

2:56dołu do góry natomiast będą dociągnięte do końca tej

3:01osi pionowej wróćmy do flex-direction row i zobaczmy

3:05jakie jeszcze mamy możliwości przy justify-content otóż możemy

3:10dociągnąć elementy do początku osi możemy je dociągnąć do

3:14końca osi no i oczywiście możemy je też wycentrować i do tego służy wartość

3:18center i w tym momencie elementy są wyśrodkowane

3:22względem osi main axis i teraz jeśli faktycznie odwrócimy

3:27sobie flex-direction na row-reverse to

3:32zobacz że elementy są numerowane od prawej do lewej natomiast one dalej zostały

3:36w tym samym miejscu w kontekście wizualnym ponieważ one są dociągnięte

3:40do środka naszego viewport'u no i oczywiście to wycentrowanie w

3:44tym momencie odbywa się wzdłuż osi poziomej ponieważ mamy ustawioną wartość

3:49pochodną do row natomiast jeśli zmienimy to na column no

3:54to elementy będą wycentrowane w pionie więc zauważ że we flexboxie nie

3:59można patrzeć parę właściwość i wartość tych

4:03właściwości w kontekście że justify-content wycentruje mi moje

4:07elementy pionowo bądź poziomo to w jaki sposób właściwości

4:11flexboxa będą się zachowywać zależy właśnie w dużej mierze od

4:16flex-direction od flex-wrap i od innych właściwości które jeszcze poznamy w

4:21kontekście justify-content mamy jeszcze trzy ciekawe właściwości

4:26które przydają się codziennym tworzeniu stron internetowych pierwszą

4:30o której opowiem jest space-between i działa

4:34ona w ten sposób że przestrzeń która jest dostępna w danej

4:38linii flexa jest rozdystrybuowana w ten sposób aby

4:42elementy nie miał żadnego odstępu od krawędzi swojego kontenera

4:47czyli to jest całe nasze cały nasz viewport jest

4:51zajęty przez to body dlatego elementy są dociągnięte od lewej i od prawej

4:55do krawędzi i dopiero później elementy układane

4:59są wewnątrz tak aby miały między sobą równe odstępy natomiast

5:03teraz co w sytuacji jeśli w którejś z linii flexa nie będzie dwóch elementów otwórz

5:08flexbox wyrówna wtedy tą konkretną linię do lewej i dopiero

5:13jeśli są przynajmniej dwa elementy to widać

5:18to space-between w tej konkretnej linii jeśli zmienimy sobie tutaj flex-direction na

5:22row-reverse to nie będzie widać tutaj za dużej różnicy ponieważ elementy tak czy siak są

5:26ustawiane w ten sposób aby nadmiarowa przestrzeń była dystrybuowana

5:31pomiędzy nimi i aby elementy były dociągnięte do krawędzi kontenera

5:35w którym się znajdują natomiast jeśli zmienimy to na column

5:39bądź column reverse to widzimy że elementy w tym momencie są układane wzdłuż

5:44osi pionowej do góry i dołu w przeciwieństwie do sytuacji

5:48flex-direction row ponieważ układamy elementy wzdłuż

5:53osi pionowej tym razem analogicznie do space-between

5:57mamy również space-around to znaczy że elementy będą

6:01układane w ten sposób aby każde z dzieci flexboxa miało

6:05równy odstęp między sobą i teraz zobacz powiedziałem

6:10równy odstęp między sobą natomiast widać tutaj na pierwszy rzut oka że

6:14odstęp pomiędzy jedynką a dwójką jest większy niż

6:18między krawędzią kontenera a samą jedynką dzieje

6:23się tak dlatego że ta jedynka ma tutaj odstęp

6:27z lewej strony powiedzmy 20 pikseli z prawej strony odstęp 20 pikseli

6:32i tak samo ta dwójka ma z lewej strony odstęp 20 pikseli

6:36i z prawej strony odstęp 20 pikseli dlatego odstęp

6:41między jedynką i dwójką jest większy niż między elementami które

6:45są na krawędzi danej linii flexboxa i do tego space-around

6:49nie gwarantuje nam równego odstępu między elementami

6:54przynajmniej nie w kontekście wizualnym aby otrzymać

6:58równe odstępy pomiędzy krawędziami kontenera i kartami

7:02flexboxa możemy użyć właściwości space-evenly i w

7:07tym momencie jeśli troszkę to rozszerzymy to zobacz

7:12że w tym momencie te karty widać że mają równy odstęp i między

7:16krawędziami kontenera i między sobą dla porównania możemy ustawić

7:23równolegle space-around i space-evenly i teraz zobacz że w momencie

7:27kiedy wyłączam space-around to elementy

7:31wyglądają równo natomiast kiedy uruchomię space-around to elementy

7:36mają więcej przestrzeni między sobą i to są tak naprawdę najważniejsze

7:41właściwości powiązane z wyrównywaniem wzdłuż danej osi flexboxa

7:45justify-content wyrównuje je tylko wzdłuż osi main axis

7:49o tym jak ustawiać elementy wzdłuż osi cross axis

7:54dowiesz się w następnym odcinku i

7:58tak tylko w ramach powtórki justify-content przyjmuje jako wartość

8:02domyślnie flex-start i tego nie musimy ustawiać to jest

8:06domyślna wartość flexboxa natomiast my mamy jeszcze do dyspozycji właściwości

8:11takie jak flex-end jak center jak

8:15space-around jak space-between

8:20oraz space-evenly

8:24i zapamiętaj proszę że justify-content

8:29nie wyrównuje elementów w poziomie bądź w pionie tylko wzdłuż

8:33osi main axis a main axis ustawiamy za pomocą flex-direction

8:38i dla wartości pochodnych od row jest to oś pozioma

8:42a dla wartości pochodnych od column jest to oś pionowa

8:46to wszystko w tej lekcji śmiało eksperymentuj z różnymi

8:50właściwościami flexboxa tak długo aż będziesz czuć się z nimi komfortowo

8:54i wtedy zapraszam cię do następnej lekcji