HTML - Tworzenie stron | Odcinek video

08. Flexbox - Układamy bloki na stronie

MIROSŁAW ZELENT

W odcinku ósmym serii powracamy do układania bloków w strukturze witryny - mamy już za sobą podejście z opływaniem float: left; oraz następnie display: inline-block; jak również mamy już w małym palcu semantykę wprowadzoną w HTML5. A teraz pora już wyjaśnić i porządnie zrozumieć flexboxa. Dziś omówimy fundamenty, czyli trzeba nam zrozumieć w ogóle ten nowszy, bardziej współczesny, flexboxowy sposób układania bloków na płótnie przeglądarki.

Znajdź w filmie

Tutoriale posiadają tzw. timestamps (chwile czasowe) - dzięki nim łatwo odnajdziesz interesujące fragmenty wiedzy. Wystarczy kliknąć na podane w nawiasach kwadratowych momenty filmu, by przewinąć tutorial dokładnie do interesującego Cię miejsca w odcinku.

[ 00:00:00 ] Tytułem wstępu
[ 00:01:12 ] Prolog, czyli co już wiemy o blokach?
[ 00:08:02 ] Konkurs, promocja i sprzęty Logitech
[ 00:12:55 ] Fundament, czyli display:flex
[ 00:13:42 ] Właściwość flex-direction: row
[ 00:15:16 ] Osie układu: main i cross
[ 00:16:51 ] Kierunki reverse, transpozycje układ
[ 00:19:59 ] Szablon złożony z siedmiu bloków
[ 00:21:57 ] Właściwość flex-wrap
[ 00:27:03 ] Właściwość flex-basis
[ 00:28:29 ] Właściwość gap
[ 00:29:29 ] Właściwość justify-content
[ 00:30:00 ] Właściwość flex-grow
[ 00:30:52 ] Właściwość flex-shrink
[ 00:31:25 ] Właściwość flex
[ 00:33:53 ] Sens istnienia flex-direction: column
[ 00:36:54 ] Porównanie row + wrap vs. column + nowrap
[ 00:37:47 ] Kilka ważnych spostrzeżeń
[ 00:40:46 ] Kilka zadań domowych
[ 00:41:48 ] Tytułem zakończenia

Partner odcinka

Partnerem odcinka jest Logitech - dziękujemy marce za wsparcie naszej edukacyjnej pracy na YouTube oraz konkurs dla naszej Społeczności! Szczegóły tutaj:

• Link do oferty promocji LogiWorkDays: bit.ly/Pasja_do_informatyki
• Regulamin konkursu: bit.ly/konkurs-pasja-logitech

Wyniki konkursu

Nagrody od Logitech w konkursie z tego odcinka wygrali użytkownicy:

• 1. miejsce: @gnomm
• 2. miejsce: @Nikodro
• 3. miejsce: @wybieracz

Serdecznie gratulujemy! I życzymy zadowolenia ze sprzętów logitechowych oraz gadżetów!