flex
Skrót ustawiający flex-grow, flex-shrink i flex-basis elementu.
- Wartość domyślna
0 1 auto- Dziedziczona
- Nie
- Animowalna
- tak, liczby i długość
- Dotyczy
- elementy flex
- JavaScript
element.style.flex = "1"
Przykład
#.app {
display: flex;
gap: 12px;
}
.app .sidebar { flex: 0 0 160px; }
.app .content { flex: 1; }<div class="app stage">
<aside class="sidebar box">Menu</aside>
<main class="content box">Treść lekcji zajmuje resztę miejsca</main>
</div>Definicja i zastosowanie
#Właściwość flex łączy trzy właściwości elementu flex: zdolność do wzrostu (flex-grow), do kurczenia się (flex-shrink) i rozmiar bazowy (flex-basis). To najczęściej używany sposób sterowania rozmiarem elementów we Flexboxie.
Warto zapamiętać kilka gotowych zapisów. flex: 1 oznacza równe kolumny dzielące całe miejsce (1 1 0%). flex: auto pozwala rosnąć i kurczyć się od rozmiaru treści (1 1 auto). flex: none zamraża element w naturalnym rozmiarze (0 0 auto).
Skrót ustawia sensowniejsze wartości domyślne niż pojedyncze właściwości: gdy podasz tylko liczbę, flex-basis staje się 0%, a nie auto.
Składnia
#flex: none | auto | <flex-grow> <flex-shrink>? <flex-basis>?;Wartości
#initial
Wartość domyślna: rozmiar z treści, bez rośnięcia.- Wszystkie elementy mają równą szerokość, niezależnie od treści.
- Elementy rosną, ale od rozmiaru swojej treści, więc dłuższe są szersze.
- Element 2 nie rośnie ani się nie kurczy, pozostałe dzielą miejsce.
- Element 2 jest dwa razy szerszy od pozostałych z
flex: 1.
Wartości w praktyce
#0 1 auto
.demo .box { flex: 0 1 auto; }1
.demo .box { flex: 1; }auto
.demo .box { flex: auto; }none
.demo .box { flex: 1; }
.target { flex: none; }2
flex: 1..demo .box { flex: 1; }
.target { flex: 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
#- Zapamiętaj trzy zapisy:
flex: 1(równe części),flex: auto(od treści) iflex: none(bez zmian rozmiaru). - Używaj skrótu zamiast trzech osobnych właściwości. Unikniesz niespodzianek z domyślnym
flex-basis.
Powiązane hasła
#- flex-growOkreśla, jak chętnie element rośnie, żeby wypełnić wolne miejsce.
- 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ć.
- displayUstala, jak element zachowuje się w układzie strony i jak układa swoje dzieci.
Widzisz błąd albo brakuje przykładu? Napisz do nas.