CSS: Pokrótce o flexie

0:00W tej lekcji opisze ci pokrótce najważniejsze rzeczy o Flex boksie.

0:04Oczywiście rozumiemy to sobie na kilka

0:07lekcji natomiast mówię pokrótce ponieważ zawiera tylko te najbardziej istotne

0:11informacje które pozwolą Ci rozwijać się dalej z boksem na własną rękę.

0:16A jeśli będzie ci zależało na bardziej dokładnym dogłębnej zrozumieniu Flex Box

0:22ponieważ tam też są różne mechanizmy które nie są na tyle oczywiste no to zapraszam

0:27Cię do kursu CSS Flex Box też mojego autorstwa na platformie Deep.

0:32Nie przedłużając przejdźmy do pracy z Fleet z boksem już teraz.

0:38Czyli tak generalnie Flex boks działa na zasadzie.

0:43Relacji rodzic dziecko jest dokładnie to samo co w przypadku gnida.

0:49Natomiast klucz jest taki że.

0:52Na rodziców czyli w tym wypadku na naszym

0:55kontenerze ustalamy nasze style czyli domyślnie.

0:59Jeśli tutaj mamy Display Black to nie jest poprawna wartość powinno być blog

1:03oczywiście i dlatego też zostało to pakowane.

1:07Jeśli zmienimy to na Display Flex.

1:10To wszystkie elementy wewnątrz tego kontenera zostaną oscylowały na Flex będą

1:14miały taki jakby niejawny DSP i ustawione na Flex.

1:18Takiej właściwości jakby wcale nie ma.

1:20To się dzieje automatycznie jakby tak z tyłu naszej głowy.

1:24No i oczywiście już zupełnie inaczej wędruje się nam cały widok

1:29czyli najważniejsze jest pamiętać że sterują xboxa albo elementy

1:35stylu rodzica a nie same elementy no i Flex Box.

1:40Uruchamiając ten tryb wyświetlania mamy

1:42dostęp do różnych właściwości takie jak np.

1:45Flex Direction które to pozwala nam wybrać w którą stronę

1:49mają się elementy układać czyli Flex Direction ustawione na rogu domyślnie

1:53będzie nam ustawiano elementy w osi poziomej.

1:59Jeśli zmienimy to na kolumn no to nasze

2:01elementy będą układały się tak jakby blokował.

2:04Więc jeżeli każdy z tych dwóch będzie miał

2:06jakąś określoną szerokość to praktycznie mamy z wyprodukowaną Display blok.

2:11Tylko że na Flex co daje nam też różne dodatkowe możliwości.

2:15Mamy też opcję Roll Rivers i.

2:20Kolumn Rivers natomiast do tego wrócimy później.

2:24Tutaj tak naprawdę moglibyśmy sobie po prostu napisać jakieś liczby żeby zobaczyć

2:28czy faktycznie elementy wędrują teraz odwrotnie.

2:32Jeżeli jest to auto oczywiście one się

2:34redukują w standardowym układzie od lewej do prawej

2:39od prawej do lewej.

2:42Do tego dochodzą właściwości takie jak

2:45kontent.

2:46I tutaj możemy dać albo center albo Flex start albo Flex end.

2:51Załóżmy że dany Center.

2:53To w tym przypadku nic się nie dzieje no bo mamy nasze elementy rozciągnięte w

2:57jednym wierszu aby dodać je do kolejnych wierszy.

3:00Używamy Flex rap.

3:04I w tym momencie faktycznie to center się

3:05zaaplikował domyślnie mamy Flex start jako wartość dla content.

3:10I tak samo jeżeli usunie tę właściwość to będziemy mieć dokładnie ten sam

3:14tryb wyświetlania Flex End ustawi nam elementy wyrówna je do prawej strony.

3:21No i.

3:25Tak naprawdę nie ma tutaj.

3:27To akurat jest coś co Flex Box jest gorsze od gry no bo nie ma.

3:32O tym też mówię w osobnym kursie.

3:36CSS gryzie i też powiem omawiając pokrótce.

3:40Natomiast możemy zrobić Elaine.

3:44I też się ustawić na przykład na domyślną wartość.

3:48Tylko że tutaj tego nie widzimy ponieważ mamy ustawioną stałą szerokość dla

3:54naszego kontenera w CSS ustaliliśmy sobie 50 proc.

3:59chwytu. Jeżeli to usunie my

4:01to będzie to faktycznie troszkę lepiej widoczne natomiast jeśli to zmienimy nas

4:05to faktycznie widać że te elementy się rozciągają.

4:09Pomimo tego że tutaj mają ustawione na 8.

4:13Więc możemy też ustawić tutaj Center i wtedy te elementy będą

4:18w każdym w każdej z linii Flex A.

4:21No i.

4:22Oczywiście też jest Flex end.

4:24Aby je do końca tego ustawić czy Flex tak aby do końca danego wiersza je ustawić.

4:31To są podstawowe wartości

4:33tak naprawdę które pozwolą Ci pracować z boksem w miarę wydajnie.

4:38Oczywiście tych bardziej skomplikowanych

4:40cech możesz nie być w stanie zrobić tylko przy pomocy tych właściwości.

4:45Jest ich o wiele więcej.

4:46Są na przykład Short Hendry tylko flex czyli np.

4:50większość z tych rzeczy możemy ustawić za pomocą tej właściwości

4:55i ustawiać tutaj Rivers na przykład czy jaki ma być Flex.

5:00Ale najważniejsze co musisz wyjąć jeżeli w

5:02ogóle chcesz zacząć pracę z boksem to ta relacja rodzic dziecko nie stosujemy

5:08pojedynczych elementów skierujemy tylko rodzica który ma nam ułożyć te elementy

5:13i że możemy ustawiać tryby wyświetlania w pionie lub poziomie za pomocą Flex

5:18Direction zabijać wiersze za pomocą Flex rap i ustawiać je

5:23elementy na tych wierszach za pomocą content czy Elaine z I line content.

5:30W kolejnej lekcji opowiem trochę o osiach bo my tutaj nie jawnie niejawne to znaczy

5:35ja nie tylko nie mówiłem o tym w ten sposób zmienialiśmy osie wyświetlania flag

5:39Xboksa i ustaliliśmy te elementy wzdłuż osi w związku z czym nie przedłużając już

5:45dłużej zapraszam do kolejnej lekcji gdzie umówmy się Xboksa.