Flexbox

Flexbox, oficjalnie znany jako Flexible Box Layout, to potężny model układu w CSS3, który pozwala na łatwe zarządzanie układem, wyrównaniem i rozmiarami elementów w kontenerze, nawet gdy ich rozmiar jest nieznany lub dynamiczny. Jest idealny do tworzenia responsywnych układów stron internetowych. W tej lekcji przejdziemy przez podstawy flexboxa, opisując różne właściwości i jak mogą być wykorzystane do budowania elastycznych układów.

Przykład zastosowania flexboxa

Poniżej znajduje się przykład kodu HTML i CSS, który ilustruje podstawowe zastosowanie flexboxa do centrowania elementów w kontenerze, zarówno w pionie, jak i poziomie.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład Flexbox w CSS3</title>
    <style>
        /* Styl dla kontenera flex */
        .flex-container {
            display: flex; /* Włącza flexbox dla tego kontenera */
            justify-content: center; /* Centruje elementy poziomo */
            align-items: center; /* Centruje elementy pionowo */
            height: 200px; /* Wysokość kontenera */
            border: 1px solid #000; /* Ramka kontenera */
        }
        
        /* Styl dla elementów wewnątrz kontenera flex */
        .flex-item {
            width: 100px; /* Szerokość elementu */
            height: 100px; /* Wysokość elementu */
            background-color: lightblue; /* Kolor tła elementu */
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item"></div> <!-- Element flex -->
    </div>
</body>
</html>

W tym przykładzie, .flex-container jest kontenerem flex, który używa display: flex; do włączenia modelu flexbox. Właściwość justify-content: center; centruje elementy w poziomie, a align-items: center; w pionie, umieszczając .flex-item w środku kontenera.

Właściwości Flexboxa

Flexbox oferuje szereg właściwości, które można zastosować zarówno do kontenerów flex (flex containers), jak i ich dzieci (flex items). Oto niektóre z kluczowych właściwości:

  • display: flex;: Włącza model flexbox dla kontenera.
  • flex-direction: Określa główny kierunek osi flex (np. row, column).
  • justify-content: Wyrównuje elementy wzdłuż głównej osi (np. center, space-between).
  • align-items: Wyrównuje elementy wzdłuż osi poprzecznej (np. center, stretch).
  • flex-wrap: Pozwala elementom na zawijanie się w kontenerze (np. wrap, nowrap).
  • flex-flow: Skrócona właściwość dla flex-direction i flex-wrap.
  • align-content: Wyrównuje linie flex w kontenerze, gdy jest więcej miejsca na osi poprzecznej (np. space-around, stretch).
  • flex-grow, flex-shrink, flex-basis: Właściwości pozwalające kontrolować rozmiar elementów flex.

Podsumowanie

Flexbox to niezwykle potężne narzędzie w CSS3, które upraszcza tworzenie responsywnych układów stron internetowych. Dzięki intuicyjnym właściwościom umożliwia deweloperom efektywne zarządzanie przestrzenią i wyrównaniem elementów wewnątrz kontenera.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top