flex-grow
Określa, jak chętnie element rośnie, żeby wypełnić wolne miejsce.
- Wartość domyślna
0- Dziedziczona
- Nie
- Animowalna
- tak, jako liczba
- Dotyczy
- elementy flex
- JavaScript
element.style.flexGrow = "1"
Przykład
#.search {
display: flex;
gap: 8px;
}
.search input {
flex-grow: 1;
}<form class="search stage">
<input placeholder="Szukaj kursu" style="padding: 8px 10px;">
<button type="submit">Szukaj</button>
</form>Definicja i zastosowanie
#Właściwość flex-grow przyjmuje liczbę, która mówi, jaką część wolnego miejsca w kontenerze dostanie element. Przy domyślnym 0 element nie rośnie wcale.
Liczby działają proporcjonalnie. Jeśli jeden element ma flex-grow: 2, a drugi 1, pierwszy dostanie dwa razy więcej dodatkowego miejsca. Uwaga: dzielone jest tylko wolne miejsce, więc elementy o różnej treści nie muszą mieć proporcjonalnych szerokości.
Żeby rozmiary były ściśle proporcjonalne do liczb, połącz flex-grow z flex-basis: 0, najwygodniej skrótem flex: 1.
Składnia
#flex-grow: <liczba>;Wartości
#- Element nie rośnie. Wolne miejsce zostaje puste.
- Element 2 zabiera całe wolne miejsce.
- Każdy element dostaje równą część wolnego miejsca.
- Element 2 dostaje dwa razy więcej wolnego miejsca niż pozostałe.
Wartości w praktyce
#0
.target { flex-grow: 0; }1
.target { flex-grow: 1; }wszystkie 1
.demo .box { flex-grow: 1; }2 i 1
.demo .box { flex-grow: 1; }
.target { flex-grow: 2; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Pole wyszukiwania z przyciskiem obok to klasyczny przypadek: pole dostaje
flex-grow: 1, przycisk zostaje w naturalnym rozmiarze. - Do równych kolumn użyj
flex: 1, a nie samegoflex-grow: 1.
Powiązane hasła
#- flex-shrinkOkreśla, jak bardzo element kurczy się, gdy w kontenerze brakuje miejsca.
- flex-basisUstala początkowy rozmiar elementu flex na osi głównej, zanim zacznie rosnąć lub się kurczyć.
- flexSkrót ustawiający flex-grow, flex-shrink i flex-basis elementu.
- justify-contentRozmieszcza elementy wzdłuż osi głównej kontenera flex lub grid.
Widzisz błąd albo brakuje przykładu? Napisz do nas.