Flexbox: Wyrównywanie względem osi przeciwstawnej

0:00Cześć witam cię w kolejnej części kursu flexbox od podstaw

0:04w poprzedniej lekcji dowiedziałeś się jak wyrównywać elementy

0:08wzdłuż osi main axis przy użyciu flexboxa

0:11i właściwości justify-content

0:13który to przyjmuje wartości takie jak flex-start flex-end center

0:18space-around space-between czy space-evenly

0:22i w tej lekcji będzie wyrównywanie elementów wzdłuż osi cross axis czyli osi przeciwstawnej

0:27do osi main axis i aby to zrobić trzeba użyć analogicznej właściwości w kontenerze flexboxa

0:35która nazywa się align-content

0:37i align-content przyjmuje prawie takie same właściwości jak justify-content

0:43to znaczy jeśli ustawimy align-content na flex-start

0:46to zobacz że elementy są dociągnięte do początku osi cross axis w tym momencie

0:52w przeciwieństwie do justify-content dociąga nam elementy

0:56do początku osi main axis dlatego w tym momencie

1:01przy takich dwóch parach właściwość wartość

1:04oba ustawione na flex-start elementy będą wyrównane do lewego górnego ekranu

1:10zakładając że mamy ustawione flex-direction na row

1:13jeśli ustawimy align-content na flex-end

1:17no to oczywiście elementy zostaną dociągnięte do końca osi przeciwstawnej

1:20no i analogicznie tak na prawdę działają pozostałe właściwości takie jak center

1:26czyli elementy są wycentrowane wzdłuż osi cross axis

1:32mamy też do dyspozycji space-around space-evenly

1:36i space-between

1:40więc już teraz mamy bardzo dużą kontrolę nad naszym layoutem

1:43powiedzmy że chcielibyśmy aby nasze karty były numerowane w ten sposób jak widzimy teraz na ekranie

1:49czyli od najmniejszej do największej w kierunku

1:51od lewej do prawej i zawiajane elementy będą układać się w dół

1:55natomiast chcielibyśmy aby elementy były wycentrowane w poziomie

1:59i dociągnięte do spodu kontenera

2:02no to możemy to osiągnąć używając wartości center na justify-content

2:06w tym momencie wycentrujemy sobie elementy wzdłuż osi x

2:12no i ustawiając align-content na flex-end

2:15dociągniemy je do końca osi cross axis

2:17osi y i otrzymamy ten efekt

2:21natomiast to że ta para wartości daje nam taki efekt na wyrenderowanej stronie

2:26działa w ten sposób tylko dlatego że ustawiliśmy tutaj flex-direction na row

2:29jeśli zmienimy flex-direction na powiedzmy column

2:33to zobacz że elementy teraz wyglądają zupełnie inaczej

2:36ponieważ zamieniła się nasza cross axis z naszą main axis

2:41i w tym momencie elemnty są dociągnięte do końca osi poziomej

2:46są wycentrowane w pionie jak widzisz tutaj odstęp od góry i dołu jest równy

2:51jeśli byśmy sobie przescrollowali to troszkę to widać teraz że to

2:55jest wycentrowane w pionie

2:57no i analogicznie jeśli byśmy chcieli wycentrować wszystkie elementy

3:00żeby znajdowały się na samym środku

3:04naszej powiedzmy płaszczyzny kartezjańskiej

3:06no to możemy dać do zarówno justify-content jak i align-content wartości center

3:13i teraz jak widzisz nie ważne jaki będzie nasz rozmiar naszego viewportu naszego kontenera

3:19to elementy pozostaną na środku

3:22no i oczywiście będą zawiajały się do następnych wierszy

3:26w tym momencie w układzie kolumnowym ponieważ mamy ustawione flex-direction na column

3:31ale generalnie elementy są już wycentrowane w obu osiach

3:36natomiast jak pewnie zauważyłeś domyślnie

3:41jeśli nie ustawiliśmy tego align-content to te elementy mają tutaj taką dziwną przestrzeń między sobą

3:49to to tylko tutaj powiększę byśmy mieli większy viewport do dyspozycji

3:54i zobacz że ustawiając align-content na flex-start

4:02ten layout wygląda inaczej to znaczy że align-content

4:06nie ma dosmyślnej wartości flex-start tak jak justify-content

4:09align-content ma domyślnie ustawioną wartość

4:13o której jeszcze nie mówiliśmy i tą wartością jest stretch

4:19stretch jest to z angielskiego ściągaj i w tym momencie tego nie widać

4:23natomiast te elementy w każej linii flexa są rozciągnięte

4:29nie widać tego ponieważ my ostylowaliśmy te karty w ten sposób aby te karty miały na sztywno

4:34określoną wysokość bodajże 150 pikseli

4:37natomiast jeśli na siłę zresetujemy sobie wysokość ustawimy ją na auto

4:42to zobacz że te elementy rozciągnęły się w ten sposób aby każdy z nich

4:48zajmował całą wysokość konkretnej linii

4:51oczywiście jeśli mniejszymy wysokość viewportu to te elementy będą się tam tutaj kurczyć

4:57natomiast ta przestrzeń nadmiarowa bierze się właśnie stąd

5:04że my pomimo tego że mamy ustawione na sztywno wysokości

5:08elementów które są pozycjonowane na flexie

5:11to i tak to align-content stretch działa i w pewnym sensie rozciąga te linie

5:17pomimo tego że my tego nie widzimy

5:20natomiast w sytuacji gdy widzimy już znane nam z justify content właściwości

5:24takie jak flex-end flex-start to wszystko zachowuje się w sposób bardziej przystępny

5:29natomiast wartość stretch jest też bardzo ważną właściwością i bardzo często jest

5:33przydatna przy tworzeniu stron www

5:35ale zoabczmy jak te elementy będą się układać gdy nie zdefiniujemy

5:42na sztywno wysokości dla każdej z naszej karty

5:45więc w momencie kiedy ustawimy align-content na stretch

5:48to oczywiście te elementy będą rozciągnięte na całą wysokość danej linii flexboxa

5:53natomiast jeśli ustawimy na align-content flex-start

5:58to zobacz że elementy skurczyły się i zajmują tyle wysokości

6:03ile ma ich treść czyli to jest takie już zachowanie które powinno być ci znane

6:08z tego jak działają elementy blokowe na przykład div'y

6:12natomiast skomplikujmy może jeszcze troszkę tą sytuację

6:16zakładając że każda z tych kart może mieć różną wysokość

6:20zmienimy height auto na powiedzmy 100 pikseli

6:24i ustawimy aby to 100 pikseli było ustawione tylko na

6:29drugim elemencie danego typu czyli na drugiej karcie ustawiamy na sztywno

6:34100 pikseli wszystkie pozostałe karty mają swoje ustawione 150 pikseli

6:39no i domyślnie elementy układają się w ten sposób że dwójka jest dociągnięta

6:44do górnej krawędzi danej linii flexboxa

6:48zobacz że jeśli będziemy manipulować wartością align-content czyli ustawimy

6:52jej powiedzmy flex-end to ta dwójka dalej jest w tej samej pozycji

6:56czyli za pomocą właściwości align-content nie możemy kontrolować położenia elementu

7:02w konkretnej linii flexboxa do tego musimy użyć innej właściwości

7:07i tą właściwością jest align-items

7:11tutaj może się wydawać że domyślną wartością właściwości align-items jest flex-start

7:17natomiast jest nią stretch tak samo jak w przypadku align-content

7:22i to że ona jest dociągnięta do góry to jest właśnie efekt tego

7:26że ustawiliśmy jej wysokość na sztywno

7:29i jest po prostu mniejsza niż pozostałe elementy w danej linii flexboxa

7:33natomiast align-items ma troszkę mniej wartości na dyspozycji

7:38mamy na nim oczywiśćie flex-start flex-end i w tym momencie zobacz że

7:43ta dwójka została dociągnięta do dolnej krawędzi danej linii flexboxa

7:48mamy też center mamy również stretch

7:55natomast wartością unikalną dla align-items jest baseline

8:00i w tym momencie nie widzimy żadnego efektu

8:03natomiast jeśli zmienimy wysokość w tym przypadku pierwszej karty

8:11moglibyśmy tutaj oczywiście użyć selektora first child

8:15i zmienimy wysokość na powiedzmy 200 pikseli i ustawimy padding

8:23górny na 40 pikseli to zobacz że elementy wyrównały się w ten sposób

8:31aby tekst aby wartości tekstowe generalnie treść danego bloku

8:37była równa to znaczy

8:40wszystkie elementy wyrównały się do tej jedynki ta dwójka

8:45pomimo tego że ma mniejszą wysokość niż pozostałe elementy

8:49wypozycjonowała się w ten sposób

8:52aby być na jednej linii no i oczywiście analogicznie pozostałe elementy

8:56też się w ten sposób ułożyły a szóstka jako że jest w osobnej linii

9:00no to już tego tutaj nie widzimy

9:02i zobacz że korzystając tak na prawdę z pięciu właściwości flexboxa

9:06możemy stworzyć na prawdę skomplikowane layouty w kontekście tego

9:09jak całe linie mają się układać używając właściwości align-content

9:15definiować jak elementy w poszczególnych liniach powinny układać się

9:21jeśli są różnej wielkości

9:23i całość możemy oczywiście obracać przy pomocy

9:26różnych właściwości dla flex-direction

9:30aby zaaplikować tą wiedzę w praktyce może wyrównajmy

9:34pozycję numeru każdej karty

9:38w ten sposób aby była ona wycentrowana

9:41więc musimy stworzyć na selektorze kart

9:45dla każdej naszej karty właściwość display flex

9:50aby ustawić że te wszystkie elementy będą zarówno kontenerami flexboxa jak i to

9:59że będą pozycjonowane przez flexboxa jako że są bezpośrednimi dziećmi tego body

10:07flex-direction nie musimy ustawiać ponieważ domyślnie jest ustawiony na row

10:13flex-wrap tak samo nie musimy zmieniać ponieważ mamy tylko jeden element w każdej z kart

10:18to co musimy zrobić to wyrównać te elementy

10:21wzdłuż osi main axis

10:24akurat tutaj zarówno kontener body jak i każda karta ma taki sam układ

10:30więc aby wycentrować to w poziomie używamy justify-content

10:37ustawiony na center i aby

10:41wycentrować to w poziomie używamy align-items center

10:46ponieważ jeśli wykorzystamy align-content to w tym wypadku to nie zadziała ponieważ ponieważ mamy tylko jedną linię flexboxa

10:55więc ona i tak rozciągnie się na całą wysokość kontenera

10:58natomiast zobacz jeszcze ciekawa sytuacja

11:00my tutaj tylko ustawiliśmy align-items na center czyli ustawiliśmy aby ten tekst

11:06był w środku tej karty oczywiście tutaj wizualnie to

11:12się nie zgadza ponieważ mamy ręcznie ustawiony padding jeśli się go pozbędziemy

11:16to w tym momencie wszystko wygląda tak jak powinno

11:19to znaczy jest równe natomiast

11:22elementy natomiast same karty dalej wyrównują się aby mieć baseline

11:29równy pierwszemu znacznikowi który ma w sobie tekst

11:33dlatego ustawienie padding top

11:39na dodatnie wartości powiedzmy 30 pikseli będzie nie tylko przesuwać

11:45położenie tej naszej jedynki w czerwonej karcie

11:49ale również będzie przesuwać wszystkie pozostałe item'y

11:52w ten sposób aby tekst był równy

11:56w kolejnych przykładach będziemy korzystali raczej z uproszczonego layout'u

12:00czyli pozbędziemy się align-items

12:04i całą resztę zostawimy tak jak jest

12:07a w kolejnej lekcji opowiem trochę jak działa

12:10kurczenie się i rozszerzanie elementów używając flexboxa