od Podstaw
4 godz. 7 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerFlexbox 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.
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ć.
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.
Cześć w tej lekcji z kursu css flexbox od podstaw będziemy
kończyli stylowanie pojedynczej karty wideo więc zerknijmy
na oryginał youtube co tutaj się dzieje jak
widzimy nawet na najmniejszym breakpoint'cie youtube ma przynajmniej
dwie karty nie wiem czy to jest dobre rozwiązanie ponieważ jeśli jeszcze
trochę to zmniejszymy to te karty już się przecinają więc my używając
flexboxa zachowamy ten feature że one będą się zawijały
do kolejnych wierszy uzupełnimy sobie obecność tego buttona
no i ostylujemy tą część tekstową na danej karcie
video zobaczmy tutaj jaki jest odstęp między tym
elementem a faktyczną pierwszą kartą
marginesu jest to 8 pikseli wydaje mi się że troszkę więcej
więc zostawimy to na około 10 pikseli czyli
powiedzmy że ta sekcja nawigacyjna
nav
będzie miała margin-bottom 20
pikseli a no i teraz przejdźmy do faktycznie stylowania
żeby ten button z dodatkowymi akcjami faktycznie nam się pojawiał
jego nazwaliśmy more details
on jest wewnątrz headingu dalej nie jestem przekonany co
do tego rozwiązania ale już zostawmy to tak jak jest więc dodajemy
tutaj spana o klasie fas
fa no i właśnie co i jak to nazwać zobaczmy
sobie font awesome to są kulki
była była to
są takie pionowe kulki dots
jeszcze raz elipsis myślnik v więc zapisujemy
ellipsis v czyli
ellipsis vertical i one się faktycznie tutaj pokazały my możemy
ten button już przechwycić w css
i teraz już wiedząc
tak to wygląda ustawimy mu kolor na 606060 margin-left
ustawimy na auto tylko że
sam heading czyli video section
video title
albo jak mi go tam nazwaliśmy
video name czyli ten element
nie jest na flexie więc dodajemy tutaj w tej display flex jako że jest to domyślnie
ustawione na tak flex-direction na row i mieliśmy tutaj ustawiony margin-left na
auto no to ten element już dojechał nam do końca ustawimy
mu tylko odpowiedni rozmiar 24
na 24 piksele to jest sam rozmiar button'a więc
my ustawimy tutaj font-size powiedzmy
na te 18 pikseli height na 24
piksele width na 24 piksele zobaczmy
jakie jest font-size samego tytułu to
jest 14 pikseli 0a0a0a więc
kolor robimy 0a0a0a
no i zobaczmy jak to wygląda
faktycznie na stronie www okej
font-size tak jak mówiliśmy 14
pikseli line-height moglibyśmy
zrobić 24 piksele żeby to było wyrównane razem z tym elementem ale
to chyba nie ma sensu możemy
mu zrobić max-height powiedzmy na maksa
i zostawimy na auto ponieważ jeżeli ten tytuł będzie dłuższy no to on
powinien nam się wyrównać więc może zróbmy tak że ustawimy
line-height na 18 pikseli czy
tam 24 już robimy to na oko i zrezygnujemy z tego
że ten details będzie pozycjonowany flexem więc
tak naprawdę moglibyśmy tego display flexa stąd zdjąć i
zrobimy że on będzie pozycjonowany absolutnie wewnątrz tego headingu
czyli ustawiamy position relative tutaj
position absolute right 0 top
0 i on jest w tym samym miejscu gdzie byłby gdy pozycjonowaliśmy
go na flexie natomiast teraz jeśli tutaj będzie więcej tekstu
oczywiście musimy zrobić jeszcze tutaj żeby on ten tekst się nie zawijał
na ten button no to on będzie mógł normalnie rosnąć nie będziemy mieli problemu
z wypozycjonowaniem tego elementu w górze nawet jeśli
box miałby mieć taki rozmiar po prostu czasami jest łatwiej użyć innych rozwiązań
css'a niż robić wszystko na flexboxie więc tutaj
możemy zrobić więc my po prostu ustawimy sobie
tutaj padding na 24
piksele no i w tym momencie ten element już
nie będzie mógł rozszerzyć się tak bardzo ponieważ tu ma ustawiony padding
a absolutnie ustawiamy na tym paddingu nasz button z
którego użytkownicy będą mogli korzystać zmniejszamy teraz ten tekst do
jego oryginalnych rozmiarów zobaczmy
jak to wygląda na youtubie no on ma jeszcze opacity
mniejsze i kolor kolor to jest 60 60 60
i tutaj to jest 60 60 60 okej
więc może po prostu zróbmy
mu domyślnie opacity na 0.8 nawet jak już jest shover'owany
i teraz tak samo jak ukryliśmy ten button watch
later tak samo ukryjemy przycisk
more details czyli na hoverze ten element będzie
miał display block a normalnie będzie miał display none i
teraz po najechaniu myszką pojawiają się na oba elementy teoretycznie
moglibyśmy je kliknąć możemy oczywiście fixnąć tutaj brak tego kursora przez
kursor pointer bądź zrobić z tego linki ale
generalnie fakt że po najechaniu myszką na ten link te elementy
się pokazują mamy już mamy już załatwiony
więc ustawmy na odpowiedni font-size line-height
na tym tekście poniżej menu to
jest bardzo malutki 13 pikseli dalej roboto 60
60 60 18 pikseli na line-height czyli na
detailsach samych ustawimy font-size
to było 14 pikseli bodajże 13
pikseli kolor 60 60
60 line-height 18 pikseli
dobra zobaczmy jak to wygląda u
nas odznaczm to no jest całkiem okej no
i pozostał nam ten badge czyli kolor
to jest 60 60 60 background to jest czarny
o przeźroczystości aż 95%
czyli video section badge będzie
miał kolor 60 60 60 background
rgba 000
czyli czarny no i tutaj 0.05
przeźroczystości dodajemy spację zobaczmy
jeszcze jaki to jest font-size jeszcze raz 12 pikseli
height
14 i line-height też 14
i teraz jak wejdziemy w to menu to ten badge
już powinien mieć ten kolor video section badge okej
tutaj daliśmy mamy błąd w konwencji
ponieważ jest video myślnik section myślnik badge a tutaj mamy
z podkreślnikiem oczywiście w markup'ie jest to błąd ponieważ powinno to być badge
z podkreślnikiem odświeżmy podgląd żeby brackets
nie świrował no i ustawmy mu display
na inline-block
okej problemem
nie jest display inline-block tylko to że mamy pozycjonowanie
na flexie czyli rodzic
tego elementu czyli sam
link video section link
ma ustawione display
flex flex-direction
column no i teraz żeby to naprawić możemy zrobić
align-items
flex-start no i w tym momencie elementy
są dociągnięte do lewej nie są już streczowanie jak to było domyślnie na miejscu tylko
ten badge jest tutaj bardzo malutki więc może jakoś go powiększmy ustawmy
mu font-weight na jakiś mniejszy i może ustawmy
też jakiś minimalne rozmiar żeby miał szerokość minimum
45 pikseli czyli min-width
45 pikseli font-weight 400
text
align center inline-block
możemy wyrzucić no i może jeszcze damy
mu albo samym detailsem margin-bottom
5 pikseli i teraz jeśli byśmy chcieli jeszcze
dodać kolejnego badge'a na przykład hd
to one będą niestety
w kolejnych liniach więc może zróbmy tutaj taki jakiś wrapper
div class video section badges i
zamknijmy te elementy wewnątrz
tego wrappera no
i ten video section badges
możemy też ostylować na flexie ale
wystarczyło by chyba na każdym badge'u ustawić margin-right
na 20 pikseli albo nawet mniej 5
pikseli każdemu z nich dajmy już nawet te 3 piksele
paddingu i
teraz ten display inline-block
nam się przyda żeby faktycznie te elementy mogły mieć ustawioną
szerokość no bo elementy inline'owe nie mogą mieć manipulowanej szerokości
ten padding
ten heigth może też troszkę
zwiększmy że będzie tam min-height no
i w tym momencie mamy już badge'a na naszym video ostatnim krokiem
byłoby skopiowanie sobie każdego
z tych li uruchomienie
flexboxa na kontenerze czyli na liście display
flex flex-wrap wrap na
pojedynczym list item'ie czyli to się u nas nazywało po
prostu video możemy ustawić margin-right
margin-right powiedzmy na 5 pikseli albo na 10
nawet i justify-content ustawimy
na center żeby te elementy były wycentrowane wewnątrz tego rodzica i
teraz gdy faktycznie rozszerzymy ten
element to wszystkie wideo będą nam
się zawijały i zajmowały tak dużo miejsca jak to jest faktycznie możliwe
w danym kontenerze nawet jeśli to będzie troszkę
mniejszy ekran to one dalej będą czytelne ponieważ flex nie pozwoli nam
żeby elementy mam wyjeżdżały poza rozmiar kontenera
flexboxa no możemy jeszcze tutaj ustawić margin-bottom
też na jakieś 10 pikseli albo
nawet na 20 i
w tym momencie ten
nasz fake youtube jest już naprawdę w miarę
wierną przynajmniej pod kątem designu kopią
youtube osoba
która nie spędza na youtubie bardzo dużo czasu na pewno na
pierwszy rzut oka dałaby się nabrać natomiast lepiej po prostu
traktować ten przykład jako ćwiczenie pracy z flexboxem
i tworzenia layoutów w kolejnym video zrobimy
drobne poprawki do naszego designu i omówimy co
jeszcze można byłoby zrobić w tym konkretnym przykładzie