kursy, tutoriale
|

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

przezAurelia Sypniewska
Czas czytania: 2 minut

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.

<div class="flex-container">
  <div>kol 1</div>
  <div>kol 2</div>
  <div>kol 3</div>  
</div>

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

.flex-container {
  display: flex;
  background-color: darkblue;
}

.flex-container div {
  background-color: #ccc;
  margin: 10px;
  padding:20px;
  font-size: 30px;
}

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.

Jeśli nie do końca rozumiecie działanie tej właściwości możecie ją przetestować z pomocą poniższego Generatora. Link do niego podesłał mi jeden z czytelników bloga – Foltas Folti

ź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