0:00 / 0:00

Flexbox: Rozmiar bazowy

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:00Cześć witam cię w kolejnej lekcji kursu flexbox

0:04od podstaw i tym razem opowiem ci czym jest rozmiar

0:08bazowy we flexboxie rozmiar bazowy ustawiamy za

0:12pomocą właściwości flex-basis ustawionej na dziecku

0:16flexboxa czyli flex-basis ustawiamy w naszym przypadku na

0:21selektorze kart i domyślnie wartością flex-basis

0:25jest auto czyli tak jak w przypadku innych właściwości

0:29flexboxa nie musimy tego ustawiać to jest wartość która

0:33jest ustawiona domyślnie i generalnie flex-basis

0:37jest to takie width i height dla elementów flexboxa

0:41czyli za jego pomocą możemy ustalać rozmiary poszczególnych elementów

0:46które są pozycjonowane na flexie które są dziećmi kontenera

0:50o właściwości display flex

0:56i skoro flex-basis działa na takiej samej zasadzie jak width i height

1:00to możemy spokojnie używać wartości

1:04zakończonych pikselami na nim na przykład jeśli wpiszemy 200 pikseli to

1:09zobacz że wszystkie karty rozszerzyły się tak

1:14aby mieć szerokość 200 pikseli możemy też operować na procentach

1:18jednostkach takich jak viewport width

1:23czy też

1:27dziedziczyć właściwości flex-basis

1:31po rodzicu teraz wróćmy do sytuacji gdy ustawiłem tutaj

1:35flex-basis na 200 pikseli i

1:39zobacz że jest tutaj taka sytuacja że bez tego

1:43flex-basis który domyślnie był ustawiony na auto te

1:47karty miały już jakąś swoją ustaloną szerokość było to 100

1:52pikseli w tych stylach bazowych które przygotowałem

1:56na początku kursu i w momencie kiedy nadamy właściwości flex-basis wartość

2:01inną niż auto to wtedy właściwości takie

2:05jak width czy height przegrywają i aplikowana jest wartość ustawiona na flex-basis

2:10czyli innymi słowy jeśli mamy ustawiony zarówno

2:14flex-basis i width i flex-basis nie ma ustawionej

2:18wartości auto kiedy flex-basis będzie miało priorytet

2:22natomiast nie jest to do końca intuicyjne dlaczego akurat flex-basis w tym

2:27wypadku ustawia nam szerokość tego kontenera więc dlaczego tak

2:31się dzieje otóż flex-basis tak samo jak inne właściwości

2:35flexboxa operuje na osiach to znaczy jako że

2:39my mamy ustawione flex-direction na row czyli naszą main axis

2:43jest w tym momencie oś pozioma to flex-basis będzie odnosiło

2:48się do rozmiaru elementu osi x jeśli

2:53zmienimy tutaj sobie flex-direction na column

2:57to zobacz że te elementy w tym momencie mają wysokość

3:02ustawioną za pomocą flex-basis i to właściwość height

3:06selektora kart jest nadpisywana przez tą właściwość a szerokość

3:11kontenera dalej jest brana z właściwości width

3:15czyli ustawiając flex-basis zmieniamy rozmiar

3:19konkretnego elementu flexboxa w odniesieniu do

3:24obecnej main axis czyli przy flex-direction row

3:28ustawiając flex-basis na 200 pikseli

3:32ustawimy tak jakby szerokość karty na 200 pikseli

3:36jej wysokość

3:44i w tym momencie nie ważne czy wpiszemy

3:48sobie height nawet

3:52po flex-basis wpisując 300 pikseli tutaj

3:57specyficzność selektorów czy kolejność właściwości wewnątrz selektorów nie

4:01ma już takiego znaczenia ponieważ zgodnie ze specyfikacją jeśli na znaczniku

4:05występuje zarówno flex-basis jak i odpowiadająca temu właściwość

4:10heigth lub width flex-basis będzie miało priorytet i

4:14korzystanie z flex-basis ma swoje zalety ponieważ mamy większą

4:19kontrolę nad tym jak elementy będą wyglądać nieważne

4:23w jakiej osi będziemy się znajdować flex-basis działa dla obu osi

4:27i ustawia rozmiar elementu wzdłuż osi main axis

4:31i dzięki temu jest nim łatwiej zarządzać

4:35jeśli planujemy przełączać wartość właściwości flex-direction

4:39natomiast jeśli nie mamy tego w planach ponieważ nasz layout

4:43tego nie wymaga to równie dobrze możemy tutaj używać właściwości

4:47takich jak width czy height