Flexbox – Elastyczny układ stron

Flexbox to jeden z najpotężniejszych systemów układów w CSS, który ułatwia tworzenie elastycznych i responsywnych układów stron internetowych. Pozwala na precyzyjne kontrolowanie rozmieszczenia elementów zarówno w poziomie, jak i w pionie, niezależnie od rozmiaru ekranu.

Jak działa Flexbox?

Flexbox opiera się na dwóch głównych pojęciach:

Flex Container (kontener elastyczny) – Element nadrzędny, który definiuje układ dla swoich dzieci (elementów wewnątrz).
Flex Items (elementy elastyczne) – Dzieci kontenera elastycznego, które automatycznie dostosowują się do dostępnej przestrzeni.

Aby użyć Flexbox, musisz ustawić właściwość display: flex na kontenerze, który zawiera elementy, które mają być elastycznie rozmieszczone.

Podstawowy przykład Flexbox:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}
.item {
  background-color: lightblue;
  padding: 20px;
  margin: 5px;
  text-align: center;
}

W powyższym przykładzie container jest kontenerem elastycznym, a item to elementy elastyczne, które dostosowują się do dostępnej przestrzeni.

Podstawowe właściwości Flexbox

flex-direction – Określa kierunek układania elementów w kontenerze.

row – Elementy są układane w wierszu (domyślnie).
column – Elementy są układane w kolumnie.
Przykład:

.container {
  display: flex;
  flex-direction: column;
}

justify-content – Określa, jak elementy są wyrównywane wzdłuż głównej osi (np. w poziomie, jeśli kierunek to row).

flex-start – Elementy są wyrównane do początku (domyślnie).
center – Elementy są wyśrodkowane.
space-between – Elementy są równomiernie rozmieszczone, z wolną przestrzenią między nimi.
Przykład:

.container {
  display: flex;
  justify-content: space-between;
}

align-items – Określa, jak elementy są wyrównywane wzdłuż osi poprzecznej (np. w pionie, jeśli kierunek to row).

flex-start – Wyrównanie do początku kontenera.
center – Wyrównanie elementów w pionie (środek).
Przykład:

.container {
  display: flex;
  align-items: center;
}

flex-wrap – Określa, czy elementy powinny zawijać się, jeśli nie mieszczą się w jednej linii.

nowrap – Elementy nie będą się zawijać (domyślnie).
wrap – Elementy będą zawijać się do nowej linii, jeśli nie zmieszczą się w jednej linii.
Przykład:

.container {
  display: flex;
  flex-wrap: wrap;
}

Kontrolowanie elastyczności elementów za pomocą `flex`

Każdy element wewnątrz kontenera może mieć określoną elastyczność, co pozwala na dynamiczne dostosowanie jego wielkości w zależności od dostępnej przestrzeni.

flex-grow – Określa, jak bardzo element powinien się rozciągać w porównaniu do innych elementów.

Wartość 1 oznacza, że element będzie się rozciągał, aby wypełnić dostępne miejsce.
Wartość 0 oznacza, że element nie będzie się rozciągał.
Przykład:

.item {
  flex-grow: 1;
}

flex-shrink – Określa, jak bardzo element powinien się kurczyć, jeśli dostępna przestrzeń jest mniejsza niż wymagana.

Wartość 1 oznacza, że element może się kurczyć, aby dopasować się do mniejszej przestrzeni.
Przykład:

.item {
  flex-shrink: 1;
}

flex-basis – Określa domyślny rozmiar elementu przed zastosowaniem elastyczności.

Przykład:

.item {
  flex-basis: 100px;
}

Tworzenie bardziej złożonych układów z Flexbox

Flexbox jest idealny do tworzenia bardziej złożonych układów stron, takich jak menu nawigacyjne, galerie zdjęć czy karty produktów. Oto przykład:

Przykład: Menu nawigacyjne

<nav class="menu">
  <a href="#">Strona główna</a>
  <a href="#">O nas</a>
  <a href="#">Usługi</a>
  <a href="#">Kontakt</a>
</nav>

.menu {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 10px;
}
.menu a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

Przykład: Układ kart produktów

<div class="product-grid">
  <div class="product">Produkt 1</div>
  <div class="product">Produkt 2</div>
  <div class="product">Produkt 3</div>
</div>

.product-grid {
  display: flex;
  justify-content: space-between;
}
.product {
  background-color: lightblue;
  padding: 20px;
  margin: 10px;
  flex-grow: 1;
}

Flexbox a responsywność

Flexbox doskonale sprawdza się przy tworzeniu responsywnych stron internetowych, ponieważ automatycznie dostosowuje układ elementów w zależności od rozmiaru ekranu. Dzięki kombinacji właściwości takich jak flex-wrap, justify-content i align-items możesz łatwo tworzyć układy, które będą działały na różnych urządzeniach.

Ćwiczenie: Tworzenie responsywnego układu z Flexbox

Zadanie: Stwórz stronę z trzema kolumnami, które przy mniejszych rozmiarach ekranu automatycznie zamienią się w wiersze.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsywny układ Flexbox</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .box {
      background-color: lightgreen;
      padding: 20px;
      margin: 10px;
      flex: 1 1 30%; /* Elastyczny rozmiar */
      text-align: center;
    }
    @media (max-width: 600px) {
      .box {
        flex: 1 1 100%;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="box">Kolumna 1</div>
    <div class="box">Kolumna 2</div>
    <div class="box">Kolumna 3</div>
  </div>

</body>
</html>

Gratulacje! Ukończyłeś lekcję 9.
Przejdź teraz do lekcji 10 >> CSS Grid Layout – Potężny system układów

Spis Treści - darmowy kurs HTML i CSS

Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS

Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)

Dodatki:
- Spis tagów HTML
- Spis Właściwości CSS

Jeśli chciałbyś być poinformowany o następnych kursach to zapisz się do naszego newslettera:

Lekcja 9 – Flexbox – Elastyczny układ stron