Flexbox – metody rozmieszczania elementów na stronie [CSS]

kursy, tutoriale

Kategoria wpisu Flexbox, Kurs CSS, Kursy, PHP, HTML, CSS Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Flexbox to jedna z coraz to popularniejszych metod rozmieszczania elementów w obrębie witryny internetowej. Metoda ta stanowi swoiste „lekarstwo” na mankamenty jakie posiada tradycyjna metoda budowy stron internetowych – blokowa. Podczas gdy w metodzie blokowej musimy często kombinować jak wyświetlić poprawnie element HTML w analogiczny sposób na każdej przeglądarce – w flexbox nie musimy już o tym myśleć. Metoda jest praktycznie obsługiwana przez wszystkie przeglądarki internetowe w ten sam sposób.

Po pierwszym spotkaniu z tą technologią nie bardzo wiedziałam jak mam się do niej zabrać. Stanowiła dla mnie wyzwanie bo była czymś innym – aby się do niej przekonać musiałam zmienić nie tyle sposób myślenia ale samo podejście. Ostatecznie okazała się całkiem łatwa a co najważniejsze przydatna. W banalny sposób rozwiązywała problemy, które w do tej pory używanej przez zemnie tradycyjnej metodzie były praktycznie nie do rozwiązania.

Flexbox posiada wiele ciekawych rozwiązań ze względu na ich ilość podzielę ten wpis na kilka części. W miarę pojawiania się nowych przykładów i rozwiązań będę zamieszczać odpowiednie linki.

Paramety Flexbox

Wygląd i zachowanie elementów flexbox można manipulować dzięki parametrom (opiszę je nieco później):

Podstawowe użycie Flexbox

Każda witryna internetowa posiada przynajmniej jedną, dwie lub trzy kolumny umieszczone obok siebie. W tradycyjnej metodzie blokowej aby umieścić takie kolumny obok siebie musimy nadać im odpowiednią szerokość oraz ustawić odpowiednio właściwość float (nie nie podam parametrów).

W kodzie HTML różnica w wyglądzie między metodami jak widać nie istnieje – w taki sam sposób dodawali byśmy elementy w metodzie blokowej.

Różnice pojawiają się dopiero w strukturze kodu CSS.

Efekt:

kol 1
kol 2
kol 3

Kluczowym elementem w tym przykładzie jest ustawienie: display: flex;
To dzięki niemu elementy zyskują nowe ciekawe właściwości.

źródło:
https://www.w3schools.com/css/css3_flexbox.asp#order
https://webroad.pl/html5-css3/2466-css3-flexbox-podstawowe-zalozenia
https://eduweb.pl/live/poznaj-css-flexbox

Dodatkowe tagi:

CSS Flexible Box Layout Module

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *