Flex-grow, Flex-shrink, Flex-basis w CSS3

By /

Html CSS

Właściwości flex-grow, flex-shrink, i flex-basis stanowią fundament elastycznego układu elementów w Flexbox CSS3. Pozwalają one na precyzyjną kontrolę rozmiarów elementów flex w kontenerze, zarówno w przypadku dostępnej dodatkowej przestrzeni, jak i konieczności zmniejszenia elementów, aby zmieściły się w kontenerze.

Flex-grow

Flex-grow określa zdolność elementu do rozciągania się w celu zajęcia dostępnej przestrzeni w kontenerze. Wartość to liczba określająca proporcje, w jakich elementy powinny rozdzielić między siebie dostępną przestrzeń.

Przykład użycia flex-grow:
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Flex-grow w CSS3</title>
    <style>
        .container {
            display: flex;
            width: 100%;
        }
        
        .box {
            flex-grow: 1;
            margin: 10px;
            padding: 20px;
            background-color: lightblue;
            text-align: center;
        }
        
        .box2 {
            flex-grow: 2;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box">Box 3</div>
    </div>
</body>
</html>

Flex-shrink

Flex-shrink definiuje zdolność elementu do zmniejszania się, kiedy całkowity rozmiar elementów flex przekracza rozmiar kontenera. Podobnie jak flex-grow, przyjmuje wartość liczbową, która określa, jak silnie element ma się zmniejszać w stosunku do innych elementów.

Przykład użycia flex-shrink:
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Flex-shrink w CSS3</title>
    <style>
        .container {
            display: flex;
            width: 100%;
            background-color: #f0f0f0;
        }
        
        .box {
            width: 200px;
            flex-shrink: 1; /* Domyślna wartość */
            margin: 10px;
            padding: 20px;
            background-color: lightblue;
            text-align: center;
        }
        
        .box2 {
            width: 200px;
            flex-shrink: 0; /* Nie zmniejsza się */
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1 (flex-shrink: 1)</div>
        <div class="box box2">Box 2 (flex-shrink: 0)</div>
        <div class="box">Box 3 (flex-shrink: 1)</div>
    </div>
</body>
</html>

W tym scenariuszu, jeśli kontener nie może pomieścić wszystkich boxów, Box 2 nie zmniejszy swojego rozmiaru dzięki flex-shrink: 0, podczas gdy inne boxy (z flex-shrink: 1) mogą się zmniejszać, aby dostosować się do dostępnej przestrzeni.

Przykład użycia Flex-grow w CSS3

Flex-grow pozwala elementom flex na rozciąganie się, aby zająć dostępną przestrzeń w kontenerze. Oto kompletny przykład demonstrujący jak można użyć flex-grow do kontrolowania rozmiaru elementów.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Flex-grow w CSS3</title>
    <style>
        .container {
            display: flex;
            width: 100%;
            background-color: #f0f0f0;
        }
        
        .box {
            flex-grow: 1;
            margin: 10px;
            padding: 20px;
            background-color: lightblue;
            text-align: center;
        }
        
        .box2 {
            flex-grow: 2;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1 (flex-grow: 1)</div>
        <div class="box box2">Box 2 (flex-grow: 2)</div>
        <div class="box">Box 3 (flex-grow: 1)</div>
    </div>
</body>
</html>

W tym przykładzie, Box 2 ma flex-grow ustawione na 2, co oznacza, że weźmie on dwa razy więcej dostępnej przestrzeni niż inne boxy, które mają flex-grow ustawione na 1.

Podsumowanie

Właściwości flex-grow, flex-shrink, i flex-basis są kluczowymi narzędziami w projektowaniu elastycznych układów za pomocą Flexboxa. Pozwalają one na dynamiczne dostosowywanie rozmiarów elementów flex, zapewniając płynne i responsywne interfejsy użytkownika niezależnie od rozmiaru ekranu. Zrozumienie i stosowanie tych właściwości umożliwia tworzenie zaawansowanych układów strony, które są zarówno estetyczne, jak i funkcjonalne.

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