CSS: Wady i zalety Flex boxa

0:00Tej lekcji podsumuje najważniejsze wady i zalety Xboksa w kontekście do innych metod

0:07pozycjonowania takich jak GRID czy zwykłe elementy blokowania CSS Flex Box jest

0:12naprawdę dobrze wspieraną metodą pozycjonowania

0:16jest zdecydowanie lepiej wspierane niż GRID a GRID też ma niesamowicie dobre

0:21wsparcie więc jeżeli musisz wspierać starsze przeglądarki jak

0:25Internet Explorer 11 czy 10 czy poprzednie wersje

0:30Flex Box prawdopodobnie będzie tam działał GRID już raczej nie.

0:34Albo w jakimś ograniczonym stopniu.

0:36Być może będą jakieś pomniejsze wagi refleks boksie na starszych przeglądarkach

0:41ale naprawdę jego wsparcie jest bardzo dobre więc co do Xboksa

0:45zarówno jak i gry nie powinieneś przejmować się kompatybilność wsteczną

0:49chyba że naprawdę pracujesz na bardzo starych projektach

0:54pomimo tego że Internet Explorer 11 czyli najnowsza wersja Internet Explorera

0:59już nie będzie wspierana przez pakiet Microsoft Office.

1:04I to też jest powód dla którego Internet Explorer zakończy swój żywot szybciej.

1:09Problemem Alexa jest przede wszystkim to że ma niejawne problemy z dostępnością.

1:16Przykład z Flex Direction robi Rivers czy kolumn Rivers.

1:21Wspomniałem tam że

1:23jeśli używamy tych dwóch elementów nasz Marka pozostaje bez zmian więc to że my

1:30zmienimy Rivers i elementy zostaną wręcz kierowane odwrotnie

1:34nie znaczy że nasz marka się zmieni co też jest problematyczne.

1:37Jeżeli na przykład tworzymy stronę pod

1:40wyszukiwarki internetowe i zależy nam na tym aby

1:43nasza lista najbardziej popularnych powiedzmy telefonów w danym roku

1:49zaczynała się od miejsca pierwszego do miejsca drugiego itd.

1:53Jeśli zrobimy sobie kolumny rewers w

1:55takiej sytuacji powiedzmy że nasze karty to jest leasing telefonów no to.

2:03Oczywiście powinniśmy wtedy dać jakiś większy większą wysokość żeby mogło sobie

2:08na spokojnie się rozwinąć i nie wyglądało w ten sposób.

2:12Natomiast w miarę KP będziemy mieli.

2:16Miejsca od 1 2 3 4 5 6 7 8 9 10 a wręcz

2:20kierowane będą odwrotnie albo jeszcze gorszej sytuacji

2:24możemy odwrócić nasz Marka i wtedy poprzez kolumn Rivers

2:30wyświetlać to poprawnie no to wtedy wyświetlane będzie to w sposób poprawny.

2:35Może będzie to lepiej widać jeżeli byśmy sobie po zmieniali.

2:39Nie wiem czy chcemy na co teraz tracić czas.

2:42Natomiast jeżeli byśmy zamienili ten mark up w ten sposób że tutaj jedynka jest na

2:47dole dziesiątka na górze dwójka na dole itd itd.

2:51No to faktycznie skończy się to tak że wyszukiwarki

2:56internetowe mogą źle zrozumieć nasz Marka lub bo będą czytało go od tyłu do dołu

3:02więc te elementy które będą lepiej rano chowane

3:07będą wyświetlał się w kodzie źródłowym na końcu co jest sytuacją bardzo niepożądane.

3:11I tu jest ten

3:13rozstrzygał pomiędzy tym jak marka jest zbudowany tym jak elementy są

3:18pozycjonowania na ekranie to nie jest tylko problem Xboksa

3:21bo jest to też problem z pozycjonowania

3:23absolutnym to jest też problem z gradem ale flex Book bardzo często przez to że ma

3:27niejawne rewers zachęca developerów do skorzystania z tej opcji.

3:33Można z niej jak najbardziej korzystać

3:34natomiast trzeba być po prostu świadomym jakie są tego efekty uboczne.

3:38Drugim problemem jest to że możemy na dowolnym elemencie ustawić order

3:42czyli zmienić jego pozycję w markecie bez faktycznego dotykania marketu.

3:47Czyli jeśli zrobimy sobie tutaj kontener.

3:52Tajner.

3:55Powiedzmy Piątek.

3:57Postawimy mu order na minus 1

4:00dokładnie ta sama sytuacja co Flex Group Flex sharing Index domyślnie mamy zero.

4:07Możemy dawać wartości ujemne bądź dodatnie tak aby przesuwać je w danej osi.

4:13Czyli jeśli damy sobie order na minus 1 to piąty element

4:18to oczywiście a nie ma takiej właściwości.

4:23Piąty element czyli szóstka w naszym wypadku bo czujemy.

4:30Od zera.

4:32Znajdzie się na samym końcu naszej listy.

4:35Pomimo tego że w Warszawie dalej znajduje się na pozycji czwartej

4:39ten problem jest też troszkę z potęgą owiany przez Greena natomiast Great

4:43posiada dużo zalet względem względem Alexa w kontekście dostępności.

4:49Zaletą Xboksa na pewno jest to że możemy tworzyć auta które będą

4:55się na podstawie treści w quizie elementy wędrują na podstawie lokautu czyli

5:01definiujemy ile ma być kolumn ile ma być wierszy.

5:04Nie mamy możliwości takiej aby to treści dyktowała jak nasz kontent ma wyglądać.

5:10Na pewno nie byłoby sytuacji takiej że

5:13będziemy w stanie zrobić sobie tutaj Flex rap rap.

5:17Ten order możemy się go pozbyć

5:21Flex musimy ustawić oczywiście na kontenerze nie na dziecku.

5:26Jeśli byśmy chcieli sobie zrobić content ustawioną na Space.

5:31Raymond.

5:33To takiego czegoś już w quizie np.

5:36nie osiągniemy ponieważ GRID może mieć

5:38tylko i wyłącznie kolumny o tej samej szerokości i wysokości.

5:43To znaczy że ten element musiałby być albo dorównać do

5:47trójki albo do szóstki nie mógłby być pomiędzy tymi dwoma elementami.

5:52To jest niewątpliwe zaleta Xboksa.

5:54I szczerze mówiąc ja korzystam z Xboksa i z grilla naprzemiennie

6:00Flex Box jest na tyle dobrze wspierany i jest na tyle dużym krokiem w kontekście

6:04tworzenia na stronach WWW zastępuje nam całkowicie konieczność używania Flota.

6:11Ta belek pozycjonowania i blokami w związku z czym

6:16Zachęcam cię do nauki Flat Xboksa oczywiście ale dobierania go w zależności

6:21od potrzeby i być może starania się unikania tych cięższych rzeczy jak np.

6:26Order czy Rewers w kontekście dostępności.

6:29Ostatnią rzeczą którą tutaj

6:31w kontekście Xboxa jest coś czego nie mówię w kursie

6:35o samym Xboksie ponieważ jeszcze wtedy ta właściwość nie była tak dobrze wspierana.

6:39Mamy możliwość zadeklarowana

6:42odstępu pomiędzy elementami używając Xboksa czyli tak jak do tej pory

6:47musieliśmy na każdym z elementów ustawić margines z lewej i z prawej strony.

6:52Powiedzmy 02 REM.

6:54I tak samo z prawej.

6:56W ten sposób musieliśmy robić jakby odstępy pomiędzy elementami

7:00co też nie było idealne ponieważ pierwszy element prawdopodobnie nie

7:04powinien mieć tego marginesu jeżeli zrobimy sobie back grunt na.

7:09To widzimy że tutaj jest dużo przestrzeni i tej przestrzeni być nie powinno.

7:14Te elementy powinny być centralne i mieć równe przestrzenie między sobą.

7:19Więc trzeba było opisać sektory że

7:22pierwszy element nie ma tego marginesu z lewej strony a ostatni ma.

7:27I to było naprawdę ciężkie do po prostu prace.

7:32Teraz mamy możliwość korzystania z

7:35właściwości GAP która ewoluowała z Great Gap

7:39i tutaj możemy po prostu podać odstęp jaki ma być pomiędzy naszymi elementami.

7:43Jeśli Tutaj wpisujemy 0 to ten GAP zostanie ustawiony.

7:47Oczywiście musimy go ustawić na Flex kontenerze a nie na taśmie to

7:52ten element będzie miał tego grupa tak jakbyśmy się tego spodziewali.

7:57I w tym momencie możemy tak naprawdę

7:59wyrównać sobie całą naszą treści content Center i wtedy.

8:04Mamy sytuację że jest idealnie

8:07wygenerowany treść w poziomie i mamy idealnie równe odstępy między Flex

8:13systemami czyli jest to troszkę podobne w tym momencie do Blida.

8:16No bo oczywiście teraz to wszystko jest

8:18równe ale dalej jest dyktowane treścią a nie autem.

8:23W związku z czym GAP jest bardzo dobrą

8:25właściwością i nie jest tak samo dobrze wspierana jak sam

8:29Flex Box ponieważ weszło to do specyfikacji.

8:32Może nie do specyfikacji ale do wszystkich przeglądarek.

8:35Dosyć później więc fakt że wspieramy

8:38Xboksa nie znaczy że GAP będzie wspierany na Xboksie.

8:42Tutaj odsyłam do Kena.

8:44Czy faktycznie GAP będzie działał w tej

8:46przeglądarce do której aspiruje żeby wyglądała jak najlepiej albo.

8:53Ustawić tego Ga-Pa zrobić folwark do marginesu w czym też będę mówił w

8:57kolejnych lekcjach przy okazji w torbach starców support kursach czy progresji.

9:04Ogólnie.

9:06Mam nadzieję że dowiedziały się co nieco o Flex boksie i zapraszam serdecznie do

9:11kolejnego działu w tym kursie czyli omówienia gry na podobnych zasadach.