0:00 / 0:00

Flexbox: Kolejność renderowania

od Podstaw

4 godz. 7 min · HTML i CSS · Full-stack i Programowanie

Wojciech PołowniakSr. Fullstack Engineer

Czego się nauczysz

Omówienie podstaw pracy z flexboxem
Pojęcie osi i kierunków
Różne sposoby renderowania treści
Kurczenie i rozszerzanie się elementów
Wsparcie między przeglądarkami
Przedstawienie problemów z dostępnością
Dodatkowe materiały do poszerzania swojej wiedzy

Szczegółowo opisana mechanika działania flexboxa

Flexbox nie jest trudny - pod warunkiem, że rozumiemy dlaczego elementy renderują się w konkretny sposób. Do tego potrzebna jest szczegółowa wiedza o osiach flexboxa, o tym jak ustalane są ich kierunki i jak elementy będą układać się wzdłuż nich.Dopiero wtedy dobrze można zrozumieć jak działa rozszerzanie i kurczenie elementów, jak elementy będą zachowywać się przy zmianie rozmiaru okna przeglądarki czy przy przełączaniu wyświetlania z układu wierszy na kolumnowy. To wszystko oraz kilka innych mechanizmów ukrytych we Flexboxie znajdziesz dokładnie wyjaśnione w tym kursie - podgląd przykładów czy dodatkowe quizy po zakończeniu kursu pomogą w utrwaleniu zdobytej wiedzy.

Problemy z dostępnością

Wielu developerów nie jest świadomych, że korzystanie z niektórych właściwości Flexboxa wpływa na dostępność naszych stron WWW - dostosowywanie naszych witryn pod czytniki ekranowe oraz użytkowników korzystających z witryn w sposób niestandardowy to temat który zyskuje na coraz większej popularności (zwłaszcza, jeśli planujesz kiedyś tworzyć strony rządowe - te są zobligowane do tworzenia stron dostępnych dla osób niepełnosprawnych).W tym kursie, dowiesz się jakie problemy może nieść za sobą używanie flexboxa i jak ich unikać.

Dla kogo jest ten kurs?

Kurs ten jest dla wszystkich osób, które dobrze czują się z CSS - wystarczy podstawowa umiejętność pisania selektorów. Nie ma żadnych wymagań dotyczących JavaScript, czy znajomości konkretnych frameworków. Natomiast jeśli do tej pory korzystałeś/aś z innych, starszych technologii do pozycjonowania elementów i chcesz nauczyć się prostszej, dobrze wspieranej współczesnej technologii - nie trać czasu! Flexbox to idealne wprowadzenie do kolejnych sposobów pozycjonowania jak np. CSS Grid.

0:00Hej witam cię w kolejnej lekcji z

0:04kursu flexbox od podstaw i tym razem wrócimy do tematu

0:08kolejności renderowania się dzieci flexboxa jak

0:13już wiesz możemy odwracać kierunek renderowania

0:17się elementów przy pomocy manipulacji flex-direction i flex-wrap

0:21natomiast pojedyncze dzieci też mogą definiować jako

0:26które powinny być wyrenderowane służy do tego właściwość order

0:31jak kolejność i order domyślnie jest ustawiony na

0:35wszystkich dzieciach flexboxa na 0 czyli elementy są układane

0:39zgodnie z markup'em biorąc pod uwagę flex-direction i

0:43flex-wrap jeśli zmienimy order dla

0:49każdej karty na 1 2 3 czy 4 nie zobaczymy żadnej różnicy

0:55w naszym podglądzie a dzieje się to dlatego ponieważ elementy które

0:59mają taki sam order będą układane

1:04zgodnie z kolejnością jak są zadeklarowane

1:09w markup'ie to znaczy aby zobaczyć właściwość order

1:13w akcji powinniśmy ustawić ją na pojedynczych

1:17elementach na przykład na pierwszej karcie jeśli

1:25ustawimy order na 5 to teraz już widzimy że

1:29karta z numerem jeden była tutaj a przeskoczyła

1:33na sam koniec i dlaczego tak się stało no

1:37ponieważ elementy we flexboxie są sortowane rosnąco

1:42to znaczy im większy order ma dany element tym później

1:46będzie wyrenderowany w tym momencie wszystkie karty do

1:50szóstej czyli druga trzecia czwarta piąta szósta mają order na 0 jest to wartość

1:54domyślna i tylko pierwsza karta ma

1:59order inny od zera i jest to 5 więc wartość

2:03tej właściwości jest wyższa niż innych kart dlatego karta

2:08pojawiła się na końcu natomiast teraz moglibyśmy tutaj wpisać 2 3 4 1

2:14dalej element znalazłby się jako ostatni natomiast

2:18jeśli na karcie drugiej ustawimy

2:23inny order ja tutaj przekopiowaniem selector

2:28więc na drugiej karcie według naszego markup'u ustawiliśmy

2:32również order 1 i zobacz że elementy będą się układały

2:37tak jak są definiowane w markup'ie czyli pierwsze

2:42cztery elementy są pierwsze ponieważ mają order zero natomiast

2:46karta z numerem 1 i karta z numerem 2 ułożyły

2:50się w ten sposób ponieważ karta z numerem jeden jest zdefiniowana szybciej

2:54w markup'ie a ma taki sam order jak karta z numerem 2 jeśli

2:59na karcie z numerem 1 ustawimy w tym momencie order 2 to

3:04zobacz że najpierw wyrenderowały się elementy z order

3:08zero później wyrenderowała się karta z order 1 a

3:13dopiero później karta z order 3 więc

3:17to co jest ważne przy operacji na właściwości order

3:21we flexboxie jest to że musimy pamiętać że domyślnie

3:26każde dziecko wewnątrz kontenera o właściwości display

3:30flex będzie miało order ustawiony na 0 i

3:34aby zmienić położenie konkretnej karty musimy na tej konkretnej karcie

3:39na tym konkretnym selektorze zmienić jego wartość oczywiście

3:45możemy też ustawić elementy na

3:49początku to znaczy jeśli chcielibyśmy aby karta z numerem 6

3:53była

3:57ustawiona jako pierwsza może w tym wypadku dać wartość

4:02ujemną daje to naprawdę bardzo duże możliwości w kontekście manipulowania

4:07layout'em zwłaszcza na różnych rozdzielczościach naszego

4:11viewport'u i oczywiście kolejność flexboxa jest

4:17również respektowana przez flex-direction czy jeśli zmienimy teraz flex-direction na

4:21column to te elementy oczywiście wyrenderują się

4:25w tym momencie jako kolumna natomiast kolejność

4:30dalej zostanie zachowana czyli szóstka będzie pierwsza jedynka będzie ostatnia

4:35ponieważ tak zdefiniowaliśmy to przy pomocy właściwości order tak

4:39samo jeśli odwrócimy teraz kierunek osi main axis

4:43na przeciwny przy pomocy sufiksu reverse to

4:48elementy będą rysowane od dołu do góry natomiast kolejność

4:53zostaje zachowana natomiast chciałbym tutaj uprzedzić

4:58że właściwość order jest dosyć

5:02ryzykowna w kontekście accessibility czyli dostępności naszych stron

5:06www dla osób niepełnosprawnych dla osób które korzystają z czytników ekranowych

5:10ten wątek poruszę w jednej z ostatnich lekcji tego kursu

5:15natomiast w tym momencie chciałbym przestrzec jeśli

5:19nie musisz używać orderu to go nie używaj do usłyszenia w kolejnej lekcji