flex-grow flex-shrink

Flexbox, oficjalnie znany jako Flexible Box Layout, to jeden z najpotężniejszych i najpopularniejszych modeli układu w CSS. Umożliwia on efektywne zarządzanie przestrzenią między i wokół elementów kontenera, nawet gdy ich rozmiary są nieznane lub dynamiczne. Dwa kluczowe atrybuty w Flexbox, flex-grow i flex-shrink, odgrywają centralną rolę w definiowaniu, jak elementy powinny rosnąć lub kurczyć się w zależności od dostępnej przestrzeni. W tej lekcji omówimy te właściwości, ich możliwe wartości i zastosowanie.

Przykład użycia flex-grow i flex-shrink

Poniższy kod HTML i CSS ilustruje użycie flex-grow i flex-shrink w praktyce. Znajdziesz tutaj kompletny przykład, który pokazuje, jak elementy flex mogą rozszerzać się i kurczyć, aby zajmować dostępną przestrzeń w kontenerze flex.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox: Flex Grow i Flex Shrink</title>
    <style>
        .flex-container {
            display: flex;
            width: 100%;
            background: lightgrey;
            padding: 10px;
        }
        .flex-item {
            background: cornflowerblue;
            padding: 20px;
            margin: 10px;
            color: white;
            font-size: 20px;
            text-align: center;
        }
        /* Zastosowanie flex-grow */
        .flex-item-grow {
            flex-grow: 1; /* Pozwala elementowi rozszerzać się */
        }
        /* Zastosowanie flex-shrink */
        .flex-item-shrink {
            flex-shrink: 1; /* Pozwala elementowi kurczyć się */
            width: 200px; /* Początkowa szerokość elementu */
        }
    </style>
</head>
<body>
    <h3>Flex Grow</h3>
    <div class="flex-container">
        <div class="flex-item flex-item-grow">1 Rozszerzam się</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
    
    <h3>Flex Shrink</h3>
    <div class="flex-container">
        <div class="flex-item flex-item-shrink">1 Kurczę się</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>
</html>

Opis działania

  • flex-grow: Właściwość flex-grow definiuje zdolność elementu do rozszerzania się w celu zajęcia jak najwięcej dostępnej przestrzeni w kontenerze. Wartość 1 oznacza, że element będzie rósł w równym stopniu w stosunku do innych elementów, które również mają flex-grow ustawione na 1 lub większą wartość.
  • flex-shrink: Właściwość flex-shrink kontroluje, jak elementy kurczą się, aby dopasować się do przestrzeni kontenera. Domyślnie wszystkie elementy mają flex-shrink ustawione na 1, co oznacza, że będą się kurczyć w równym stopniu, jeśli będzie to konieczne. Ustawienie tej wartości na 0 zapobiegnie kurczeniu się elementu.

Możliwe wartości

  • Dla flex-grow: Możliwe wartości to liczby całkowite (np. 0, 1, 2 itd.), gdzie 0 oznacza, że element nie będzie rósł, a wyższe wartości określają “siłę wzrostu” w porównaniu do innych elementów.
  • Dla flex-shrink:

Podsumowanie

Flexbox to niezwykle potężne narzędzie w CSS3, które znacznie ułatwia projektowanie responsywnych i elastycznych układów stron internetowych. Właściwości flex-grow i flex-shrink są kluczowe dla zrozumienia i efektywnego wykorzystania tego modelu. Pozwalają one kontrolować, jak elementy w kontenerze flex powinny się zachowywać, gdy dostępna przestrzeń jest większa lub mniejsza niż suma szerokości domyślnych tych elementów.

  • flex-grow pozwala elementom rozszerzać się, wypełniając dostępną przestrzeń, co jest szczególnie użyteczne w projektach responsywnych, gdzie chcemy, aby elementy dynamicznie dostosowywały się do zmieniającej się szerokości kontenera.
  • flex-shrink umożliwia elementom kurczenie się, gdy całkowita szerokość elementów przekracza dostępną przestrzeń kontenera, co zapobiega wychodzeniu elementów poza kontener i zachowuje układ strony niezależnie od rozmiaru ekranu.

Korzystając z tych właściwości, można tworzyć zaawansowane układy strony, które są zarówno estetyczne, jak i funkcjonalne na różnych urządzeniach i rozdzielczościach. Flexbox otwiera przed nami szerokie możliwości projektowania interfejsów użytkownika, umożliwiając tworzenie bardziej interaktywnych i angażujących doświadczeń webowych.

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