flex1 - Flexbox CSS jako wstęp do Bootstrapa 4

Flexbox CSS jako wstęp do Bootstrapa 4

Display: flex;

Poniżej 30 minutowy przewodnik po właściwości CSSa o nazwie “flexbox” (w CSS zapisujemy ją jako display: flex;).

Nie bez powodu mówię akurat o flexboxie. Jest to świetny wstęp przed kursem Bootstrapa 4 ponieważ jedną z jego głównych różnic z poprzednią wersją, jest właśnie wykorzystanie flexa przy tworzeniu siatki. Dobre zrozumienie tego jak działa flexbox, zdecydowanie przyda się podczas tworzenia stron z Bootstrapem v.4 i sprawi, że będziemy rozumieli dlaczego poszczególne elementy zachowują się właśnie w taki sposób.

Na kurs Bootstrap 4 możesz zapisać się tutaj: Kurs Bootstrap 4 – zapisy

Display: inline-flex;

W filmie nie wspomniałem o możliwości ustawienia display: inline-flex.

Różnica pomiędzy “display: flex” oraz “display: inline-flex” jest identyczna jak pomiędzy “display: block” oraz “display: inline-block“. Czyli łączy w sobie cechy elementu blokowego (np. możemy stosować padding) oraz elementu liniowego (np. możemy ustawiać kilka elementów obok siebie, bez przechodzenia do nowej linii).


ebooks - Flexbox CSS jako wstęp do Bootstrapa 4