Flexbox w css3

By /

Html CSS

Flexbox, czyli Flexible Box Layout, to jeden z najpotężniejszych i najbardziej elastycznych modeli układów dostępnych w CSS3. Zaprojektowany, aby ułatwić projektowanie responsywnych układów stron internetowych, Flexbox pozwala na efektywne zarządzanie przestrzenią pomiędzy elementami w kontenerze, zarówno w pionie, jak i w poziomie.

Podstawowe koncepcje Flexbox:

  • Flex Container: Kontener, na którym stosowana jest właściwość display: flex; lub display: inline-flex;, staje się flex kontenerem.
  • Flex Items: Bezpośrednie dzieci flex kontenera stają się automatycznie elementami flex (flex items).
  • Main Axis i Cross Axis: W Flexboxie można zdefiniować główną oś (main axis), wzdłuż której układane są elementy, oraz poprzeczną oś (cross axis) – prostopadłą do głównej osi.

Kluczowe właściwości Flexbox:

  1. display: Ustawienie flex lub inline-flex tworzy flex kontener.
  2. flex-direction: Określa kierunek głównej osi (np. row, column).
  3. justify-content: Definiuje wyrównanie elementów wzdłuż głównej osi.
  4. align-items: Określa wyrównanie elementów wzdłuż osi poprzecznej.
  5. flex-wrap: Pozwala elementom na zawijanie się, jeśli nie mieszczą się w jednym rzędzie lub kolumnie.
  6. align-content: Wyrównuje linie wewnątrz flex kontenera, gdy jest więcej miejsca na osi poprzecznej.
  7. flex-grow, flex-shrink, flex-basis: Kontrolują rozmiar elementów flex w zależności od dostępnej przestrzeni.

Przykład użycia Flexbox:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Flexbox w CSS</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            background-color: lightgrey;
        }
        
        .flex-item {
            background-color: deepskyblue;
            padding: 10px;
            margin: 5px;
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
</body>
</html>

 

Podsumowanie

Flexbox oferuje prosty i potężny sposób na tworzenie dynamicznych, responsywnych układów bez konieczności stosowania złożonych hacków czy floatów. Dzięki intuicyjnej kontroli nad rozmieszczeniem elementów, zarówno w pionie, jak i w poziomie, Flexbox stał się nieodzownym narzędziem w arsenale każdego front-end developera. Pozwala on na szybkie i efektywne tworzenie układów, które dostosowują się do różnych rozmiarów ekranu, ułatwiając tworzenie nowoczesnych stron internetowych.

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

Powiązane artykuły

Scroll to Top