flex-grow

Lekcja 14 z 15 w kursie CSS Flexbox — kompletny kurs w Coddy.

Właściwość flex-grow określa możliwość powiększania się elementu flex (w razie potrzeby).

Przyjmuje liczbę, która służy jako proporcja.

Jeśli wszystkie elementy mają ustawioną wartość flex-grow na 1, pozostała przestrzeń w kontenerze zostanie rozdzielona po równo między wszystkie elementy potomne. Jeśli jeden z elementów potomnych ma wartość 2, zajmie dwa razy więcej przestrzeni niż każdy z pozostałych elementów.

Przykład,

.item {
  flex-grow: 4;
}

Wartość domyślna to 0; liczby ujemne są nieprawidłowe.

Wyzwanie

Łatwy

Masz kontener flexbox z trzema elementami flex. Spraw, aby środkowy element flex rósł dwa razy bardziej niż elementy po bokach.

Przypisz właściwość flex-grow wszystkim elementom.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
</html>

Wszystkie lekcje w sekcji CSS Flexbox — kompletny kurs

1Wprowadzenie

Wprowadzenie Kontener i elementy

2Kontener Flex

Flexbox kierunek flex zawijanie flex przepływ flex justowanie zawartości wyrównywanie elementów wyrównywanie zawartości odstęp Idealne wyśrodkowanie

3Elementy flexboxa

Elementy potomne orderflex-growalign-self

Poćwicz samodzielnie: Edytor online Web