flex-grow i basis — CSS

flex-grow decyduje, jak element wypełnia wolne miejsce.

Cel lekcji

Poznać zagadnienie „flex-grow i basis”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

flex-basis określa jego rozmiar wyjściowy. To podstawa elastycznych kolumn.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Wygląd strony w przeglądarce

.layout { display: flex; }
.left { flex: 1; }
.right { flex: 2; }

Przeczytaj kod linijka po linijce

.layout { display: flex; }Ustawiamy sposób rozmieszczania elementów.
.left { flex: 1; }Przypisujemy wartość wybranej właściwości CSS.
.right { flex: 2; }Przypisujemy wartość wybranej właściwości CSS.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Dwie kolumny dzielą wolne miejsce w proporcji około 1:2 (przy tych regułach).

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Zmień proporcje na 1:3.