Podstawy Flexbox

Reading Time: < 1 minute

W flexbox wyglądem i zachowaniem elementów elementów na stronie można manipulować dzięki różnym parametrom. Odpowiadają one za ułożenie oraz zachowanie konkretnych elementów na stronie. Zalicza się do nich:

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