CSS Academy · Lekcja

Flex-grow, flex-shrink i flex-basis

Ustawią Państwo sposób powiększania i pomniejszania elementów flex oraz ich rozmiar bazowy za pomocą skróconej właściwości flex.

Flex-grow, flex-shrink i flex-basis to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Skrót flex

Skrót flex stosowany na elementach flex ustawia trzy wartości: flex-grow, flex-shrink i flex-basis.

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis ustawia początkowy rozmiar elementu flex przed jego powiększeniem lub zmniejszeniem. Zastępuje wartość width (w kierunku wierszowym). auto używa szerokości elementu lub rozmiaru jego zawartości.

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow określa, jak bardzo element rośnie w porównaniu z elementami równorzędnymi, gdy dostępne jest wolne miejsce. Wartość 0 oznacza brak wzrostu. Wyższe wartości otrzymują proporcjonalnie więcej miejsca.

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

Przykład flex-grow

Jeśli kontener ma 300px wolnego miejsca, a dwa elementy mają wartości flex-grow 1 i 2, pierwszy otrzyma dodatkowe 100px, a drugi dodatkowe 200px (stosunek 1:2).

flex-shrink

flex-shrink kontroluje, jak bardzo element zmniejsza się, gdy brakuje miejsca. Wartością domyślną jest 1 (wszystkie elementy zmniejszają się jednakowo). Wartość 0 zapobiega zmniejszaniu.

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

Typowe wartości skrótu flex

Warto zapamiętać te typowe wzorce:

flex: 1 = jednakowe powiększanie i zmniejszanie, basis 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (sztywny)
flex: 0 0 200px = stałe 200px, bez powiększania i zmniejszania

flex: 1 — równy podział

Ustawienie flex: 1 na wszystkich elementach potomnych dzieli dostępną przestrzeń po równo. Basis przyjmuje wartość 0%, więc elementy rosną od zera i dzielą przestrzeń proporcjonalnie.

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis a width

flex-basis ma pierwszeństwo przed width w kierunku osi głównej. Jeśli ustawisz obie wartości, wygrywa flex-basis (chyba że ma wartość auto, która przekazuje kontrolę właściwości width).

Rozmiarowanie wewnętrzne a zewnętrzne

Gdy flex-basis: 0 (jak w przypadku flex: 1), element zaczyna od rozmiaru 0 i rośnie proporcjonalnie — następuje prawdziwy proporcjonalny podział. Przy flex-basis: auto elementy zaczynają od naturalnego rozmiaru zawartości, a następnie rosną.

Wzorzec świętej trójcy

Klasyczny układ ze stałym paskiem bocznym, elastyczną częścią główną i stałym paskiem bocznym:

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

min-width i max-width z flex

Użyj min-width i max-width razem z flex-grow, aby kontrolować granice powiększania:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

Szybkie sprawdzenie

Element ma wartość flex: 0 0 200px. Co to oznacza?

Podsumowanie

flex-grow rozdziela dodatkową przestrzeń proporcjonalnie. flex-shrink kontroluje zmniejszanie elementów. flex-basis ustawia rozmiar początkowy. Skrót flex: 1 umożliwia równy podział przestrzeni. Użyj flex: 0 0 Xpx dla elementów o stałym rozmiarze oraz flex: 1 dla elementów elastycznych w tym samym kontenerze.

Często zadawane pytania

Czy lekcja „Flex-grow, flex-shrink i flex-basis” jest bezpłatna?

Tak — pełny tekst „Flex-grow, flex-shrink i flex-basis” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Flex-grow, flex-shrink i flex-basis”?

Ustawią Państwo sposób powiększania i pomniejszania elementów flex oraz ich rozmiar bazowy za pomocą skróconej właściwości flex. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Flex-grow, flex-shrink i flex-basis”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy