CSS: Problematyka osi

0:00W tej lekcji będę mówił o problematyce osi Reflex boksie czyli to co ominęło ją w

0:06poprzedniej lekcji a co jest tak naprawdę fundamentem całego CSS a poza tą

0:11relacją rodzic dziecko Flex Box działa w dwóch osiach w osi

0:16pionowej osi poziomej tak naprawdę nazywa się to Main

0:19Cross Axe czyli oś główna i oś przeciwległych i my te osie

0:26definiujemy za pomocą polecenia Flex Direction domyślnie Flex Direction ma

0:32wartość czyli naszą osią główną osią domyślną jest oś

0:39pozioma i domyślnie kierunek tej osi jest skierowany w prawo.

0:43Ten kierunek możemy zmieniać za pomocą

0:46właśnie miksu Rivers czyli tak naprawdę Flex direction.

0:52Można powiedzieć że składa się z tych czterech słów kluczowych

0:56wartości Ron Rivers kolumn i kolumn Rivers z tym że tak naprawdę ustalamy tutaj

1:05nie tylko jedną właściwość ale można by powiedzieć że dwie ponieważ roku

1:10bądź kolumn czyli ten prefekt definiuje nam która oś jest osią machiny

1:17akcji a która jest Cross Access a fix Rivers informuje w którą stronę ma

1:24ona się układać czyli jeśli tutaj po kleju po prostu.

1:29Cyfry.

1:34Z numerami naszych elementów tutaj zdecydowanie ten żółty powinien być

1:38troszkę ładniejszy bo tutaj ten kontrast nie jest najlepszy.

1:43Możemy też ustawić na body albo na samym kontenerze.

1:49Jest troszkę większy fontanna jest powiedzmy 2 m dwa razy większe

1:56no i powiedzmy że

1:58nie będzie Grand.

2:00Kolor na Black.

2:01Zobaczymy czy to jest troszkę czy to mniejsze.

2:04No tak to zostawimy

2:06żeby to wyglądało ładnie no to oczywiście też zrobimy fajne.

2:10Czy w tym przypadku Elaine.

2:12Systems Center i ustawiając ten sam Fix Rivers jesteśmy w stanie

2:18zmienić kierunek osi poziomej XX w jedną bądź w drugą stronę.

2:25Nie jest to jednak takie oczywiste

2:28ponieważ pomimo tego że zmienimy sobie tutaj rok na roli wersji.

2:35Nasze elementy w miarę kapie dalej będą wyświetlał się w tej samej kolejności co

2:40jest problemem dostępności ponieważ jeśli coś wygląda że jest w innym miejscu

2:47natomiast w miarę kapie jest jakby w kolejności odwrotnej.

2:51Może to powodować problemy z nawigacją

2:53klawiaturą może powodować zakłopotanie użytkowników czytników ekranowych

2:58gdy słuchają które elementy są na liście czyli czytali.

3:031 2 3 4 5 6 7 8.

3:05Bo tak jest Mark kapie natomiast refundowane jest to odwrotnie.

3:09To jest jakby problem Xboksa w kontekście dostępności.

3:15No i możemy oczywiście też zmienić oś główną czyli Main akcji.

3:19W tym momencie poza pisaniem będzie oś pionowa a Cross Access będzie osią.

3:25Poziomu.

3:28Tutaj nam się oczywiście te elementy już nie mieszczą ciekawe że tak się zginęły.

3:32Pewnie dlatego że mamy na sztywno zapisaną

3:34wysokość kontenera możemy mu tutaj zrobić Hewitt auto zobaczymy czy się wtedy

3:39wyświetli tak wyświetlał się i oczywiście tutaj się teraz nam zrobił król

3:45no i możecie zauważyć że

3:49rewers tutaj ten element był w centrum

3:53a w tym momencie już nie jest.

3:56W związku z czym jak wrócimy do tego z czego to wynika.

4:01Przede wszystkim dlatego że.

4:03Wszystkie te wartości content.

4:09Enter line content Center i Line

4:16Center one są

4:18wartościami które są względne dla obecnej osi to znaczy że zmieniając powiedzmy

4:25tutaj narodu wróćmy do podstawowego przypadku.

4:29To się nam tutaj cenzuruje.

4:31W tym elemencie ten tekst się nie cenzuruje ponieważ same.

4:35Elementy nie są Flex i moglibyśmy to w sumie zrobić.

4:39Kontener The.

4:42Bezpośrednie dziecko

4:44żeby po prostu nie łapać więcej tych dwóch

4:46sal które są generalnie też problematyczne jeżeli chodzi o wydajność.

4:50Natomiast na potrzeby tego przykładu użyjemy takiej notacji moglibyśmy dodać im

4:55klasy po prostu i byłoby to zdecydowanie lepsze rozwiązanie.

5:00Ale w tym momencie one będą w centrum

5:01niezależnie od tego jakie ustawiły no bo każde z tych Flex.

5:08Będzie też jakby kontener a nie ma z tym

5:11problemu to jest normalna rzecz w sensie że elementy mogą być zarówno.

5:16Dziećmi czegoś np.

5:18Flex i mieć własne Display.

5:21Więc to jest jakby rzecz z którą na pewno

5:24warto eksperymentować jeżeli nie jesteście pewni jak korzystać z Flex czy GRID.

5:29Czy jest tak naprawdę z różnych innych trybów wyświetlania.

5:32Ale głównym

5:34problemem jest to że jeśli ustawiamy Flex rap na Raw czyli będziemy zwijać elementy

5:39do następnych wierszy no to w osi poziomej content Center robi nam robotę.

5:47Natomiast jeśli zmienimy tutaj Flex

5:49Direction kolumn no to już to nie jest wycena.

5:52Dlaczego.

5:53Ponieważ Flex Direction rok kolumn zmienia Main XIX XX

5:59a content wyrównuje elementy.

6:03Wzdłuż akcji w związku z czym jeżeli my zmieniamy tutaj

6:08Flex Direction na kolumn nasza Flex Alexis jest w tym momencie

6:14pionowa no to my nie widzimy że to się tutaj zawija no bo tak naprawdę nie ma

6:19powodu mamy tak długo dużo szerokości jak tylko chcemy.

6:22Jeżeli byśmy troszkę zawężenie zapewnili

6:25powiedzmy do stu hitów no to wtedy tutaj już się to

6:29zawiśnie ponieważ jest więcej treści niż ten kontener nam pozwala mieć.

6:35No i faktycznie jakby na to spojrzeć

6:38to w tej osi te elementy są wyrównane może to nie jest tak dobrze widoczne.

6:43Może jeśli byśmy to zmniejszyli do jakichś dwudziestu chwytów.

6:5040. Musimy sobie protestować.

6:5550.

6:57Tak to widzimy że jak cały kontener ma jakby kolor DDT.

7:03Względem tego kontenera to jest wyrównane

7:06w osi XX czyli zamieniając tutaj Flex Direction na kolumn

7:12nie możemy myśleć w kontekście poziomu i pionu musimy myśleć o głównej i

7:18drugorzędne osi bo w tym momencie mamy w poziomie a w tym momencie.

7:25Porównamy.

7:27I pozostałe dwie wartości faktycznie

7:30pozwalają nam równać elementy w Cross czyli Elaine TMS.

7:37Pozwoli nam

7:39to element.

7:41W Cross Access czyli dla Flex Direction kolumn które sprawia że Main Access jest

7:47pionowe i jego Cross Access jest poziome to Elaine z.

7:53Ustawa Cross Access cenzurowania elementów nazw Enter.

8:00Jeśli byśmy tutaj Flex End to oczywiście by wyrównało do prawej strony

8:07ale przy rogu naszym Close Access jest oś pionowa.

8:12W związku z czym elementy będą nam się równać w pionie.

8:16Może to się wydawać dziwne natomiast jest to czasami faktycznie

8:20wygodne ponieważ możemy stworzyć lej AUD który jest domyślnie

8:24Flex Direction i tylko na mniejszych rozdzielczości jak

8:27zmienić tę wartość na kolumn i teoretycznie wszystkie nasze style będą

8:32rozszerzyły się tak jak już wspominałem wcześniej na tę stuprocentową szerokość.

8:37Jedną różnicą co do

8:39Elaine content i elite a teraz jest to co tak naprawdę jest zrównane.

8:45Czyli jeśli tutaj to komentujemy.

8:49Zapraszamy.

8:52To jesteśmy w stanie zobaczyć jak

8:55pojedyncze wiersze Flex są wyrównane i wiersze nie muszą być poziome w tym

9:01momencie no bo tak jak wspominaliśmy access może być też osią pionową.

9:05Generalnie w każdym momencie kiedy Flex zawija elementy do następnego wiersza

9:12Do następnego rzędu może to będzie lepsze określenie.

9:16My jesteśmy w stanie zadeklarować jak treść ma być ustawiona za pomocą

9:22lin kontentu czyli jeśli ustawiamy sobie tutaj Flex and.

9:26No to ten element jest wyrównywanie.

9:30Do końca naszej akcji jest no bo wszystkie elity działają w Close Access

9:36ale nie wyrównało się tylko położenie naszych elementów.

9:40Ale oba wiersze

9:42istniały do końca czyli tutaj.

9:45Center.

9:49Sprawia że.

9:51Ten wiersz ten wiersz ten wiersz ten

9:54wiersz ten wiersz są wciśnięty ze sobą a jeśli zrobili byśmy Elaine z Center.

10:02To widzimy że pojedyncze dzieci Flex w

10:06danym wierszu są w centrum do środka czyli w tym wierszu.

10:11Te elementy są w środku no i oczywiście to samo dzieje się dla osi przeciwnej czyli

10:18jeśli zmienimy sobie tutaj na Flex Direction są.

10:22To widzimy że Berlin wyrównuje nam elementy wzdłuż jednego wiersza.

10:29Wzdłuż osi.

10:32Kroosa.

10:33Ale jeśli zmienimy to na content Center to te elementy te wiersze się ze sobą

10:40cisną czyli przestrzeń między wierszami jest zarządzana poprzez Elaine content

10:45a same elementy są zarządzane przez Elaine Gates.

10:49Jeśli to nie jest wystarczająco jasne.

10:53Ponownie Zachęcam cię do zobaczenia kursu o CSS Flex Box gdzie.

10:59Ten temat rozwijam.

11:02Dogłębnie a w tym momencie to wszystko co mogę Ci powiedzieć w kontekście osi Xboksa

11:09i w kolejnej lekcji opowiem ci co nieco o relacji rozmiarów danych elementów Flex.