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.

Kurs Bootstrap 4 dostępny tutaj: Kurs Bootstrap 4
Wpisz kod BOOTSTRAP4_YTPROMO, aby skorzystać ze zniżki 10%

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).