Flexbox: Włączanie flexboxa

0:00Cześć witaj w kolejnej lekcji kursu o flexboxie po tym krótkim wprowadzeniu

0:04które zrobiliśmy w poprzednich lekcjach możemy przejść do faktycznej pracy

0:08z flexboxem jeszcze raz zobaczmy na ten markup na podstawie którego

0:12będziemy poznawać właściwości flexboxa zobacz że bezpośrednio

0:17w body mamy 6 kart 6 div'ów o klasie card każdy

0:22z tych div'ów ma spana o klasie card number i tutaj każda

0:27z tych kart ma swoją konkretną numerację natomiast

0:33w markup'ie jej nie posiadamy ponieważ jest ona zrealizowana przez css counters więc

0:38odpowiednikiem karty czerwonej będzie ten

0:43oto div odpowiednikiem karty pomarańczowej będzie ten odpowiednikiem

0:47trzeciej karty będzie następny i tak dalej i tak dalej to

0:52bardzo ważne aby zauważyć że w naszym body mamy bezpośrednio

0:56umieszczone właśnie te znaczniki kart ponieważ flexbox operuje bardzo

1:00mocno na zależnościach rodzic-dziecko więc przejdźmy

1:04do przykładu i zobaczymy o co konkretnie tutaj chodzi przechodzimy do nowo utworzonego

1:09pliku flex kropka css i domyślnie jak widzisz te div'y

1:13te karty są ustawione w taki sposób że każda z nich pomimo tego że ma określone

1:17wymiary czyli swoją szerokość i wysokość to zajmuje

1:21jednak całą linię ponieważ są to div'y są to elementy blokowe i tak domyślnie

1:26zachowuje się div w przeglądarkach aby

1:30zaaplikować flexboxa do tego przykładu i manipulować tymi sześcioma

1:34kartami przy jego pomocy musielibyśmy na rodzicu

1:38na rodzicu tych kart ustawić właściwość display flex no i

1:42w tym wypadku rodzicami wszystkich tych kart jest znacznik body więc my po prostu

1:47sobie tutaj stworzymy selektor na body i aktywujemy flexboxa za pomocą właściwości

1:52display ustawionej na flex i zobacz że samo wpisanie display flex

1:56zmieniło nam kompletnie layout tych kart widoczny po prawej stronie jeśli

2:01wyłączymy chwilowo ten display flex no to oczywiście te karty wrócą do swojej normalnej wartości

2:05i sama ta jedna właściwość całkowicie zmienia nam sposób

2:10renderowania naszej strony to że te karty ułożyły się w ten sposób to znaczy

2:14są ułożone jedna obok drugiej a w dodatku są

2:18skurczone to znaczy mają mniejszą wartość swojej szerokości niż my to

2:22wpisaliśmy w css poprzez właściwość width odpowiadają

2:26za to poszczególne właściwości css które są

2:30uruchamiane przez to że rodzic posiada właśnie

2:34display flex a ich domyślne wartości definiują że wygląda to w ten sposób

2:38i domyślnymi wartościami dla kontenera

2:42jest na przykład flex-direction o którym będziemy mówili

2:47dokładniej następnych lekcjach ustawiony na row czyli

2:52zobacz że zmiana tej konkretnej reguły jej obecność

2:56zupełnie nie wpływa na layout ponieważ to jest wartość domyślna tak samo

3:00analogicznie wartością domyślną którą kontener otrzymuje jest

3:05flex-wrap o wartości nowrap flex-direction

3:10operuje na ustawieniu

3:14kierunku w jakim elementy będą się domyślnie ustawiać

3:18możemy na przykład wpisać tutaj column i zobacz teraz że przełączanie

3:23tej właściwości zmienia faktycznie layout naszej strony właściwości

3:28flex-wrap odpowiada za to że w momencie kiedy w kontenerze elementy

3:34nie będą się już mieścić to ustawienie nowrap w sprawi że one będą się ściskać

3:38aby zmieścić się w jednej linii w danym kontenerze jeżeli

3:43zmienimy to na właściwość wrap to jak

3:47widzisz te karty zostają rozstrzelone na dwie linie i

3:51mają swoje naturalne rozmiary ustawione przez właściwość

3:55width w css jeśli przełączymy teraz tą wartość to zobacz że widać że

4:01wartością domyślną dla flex-wrap jest nowrap

4:05trzecią właściwością której efekt już w tym momencie widzimy

4:09a która jest automatycznie uruchamiana w momencie pozycjonowania na flexboxie jest

4:14właściwość flex-shrink tylko że uwaga flex-shrink nie jest już ustawiony na

4:18kontenerze flexboxa tylko na dzieciach na

4:22każdym dziecku flexboxa to znaczy że my moglibyśmy

4:26to zaadresować za pomocą selektora kart ponieważ wszystkie nasze karty posiadają

4:32tą oto klasę i są bezpośrednimi dziećmi tego kontenera

4:36body natomiast to co flexbox robi to nie

4:40zwraca uwagi na to jakie mamy klasy ustawione na danych znacznikach tylko

4:45można to uprościć do stwierdzenia że na znaczniku body który posiada właśnie

4:49właściwość flex jest zrobione taki selector który nadaje

4:54wszystkim bezpośrednim dzieciom wszystkim znacznikom właściwość

4:58flex-shrink na 1 oczywiście takiego selektora w źródłach

5:03nie będzie ale chciałem to jasno zobrazować wszystkie

5:07te karty pojedynczo nie body nie rodzic mają właściwości flex-shrink

5:11ustawione na 1 jest to automatycznie robione przez

5:15flexboxa jeżeli zmienimy sobie teraz tą własność flex-shrink na 0

5:19to zobacz że karty już się nie zwężają za to odpowiada właśnie flex-shrink

5:23za kurczenie się kart w przypadku gdy nie

5:28ma już na nie miejsca oczywiście każda z tych kart każdy znacznik kart

5:32również mógłby posiadać właściwość display flex i wtedy pomimo tego

5:36że byłby dzieckiem kontenera i byłby sam wypozycjonowany na flexie

5:40ale również jego dzieci mogłyby

5:44być pozycjonowane za pomocą flexa znając już takie konkretne podstawy

5:49tego jak działa flexbox możemy przejść do następnych lekcji

5:53i zacząć poznawać poszczególne jego właściwości