flex-basis
Ustala początkowy rozmiar elementu flex na osi głównej, zanim zacznie rosnąć lub się kurczyć.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- elementy flex
- JavaScript
element.style.flexBasis = "200px"
Przykład
#.columns {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.columns > * {
flex: 1 1 180px;
}<div class="columns stage">
<div class="box">Moduł 1</div><div class="box">Moduł 2</div><div class="box">Moduł 3</div>
</div>Definicja i zastosowanie
#Właściwość flex-basis określa punkt wyjścia dla rozmiaru elementu na osi głównej. Najpierw każdy element dostaje swój rozmiar bazowy, a dopiero potem wolne lub brakujące miejsce jest rozdzielane według flex-grow i flex-shrink.
Przy auto element patrzy na swoje width (lub height w kolumnie), a jeśli go nie ma, na rozmiar treści. Wartość 0 oznacza start od zera, dzięki czemu przy równym flex-grow elementy mają dokładnie równe rozmiary.
W kontenerze z flex-direction: column flex-basis dotyczy wysokości, a nie szerokości.
Składnia
#flex-basis: auto | content | <długość> | <procent>;Wartości
#Wartości w praktyce
#auto
.demo .box { flex-basis: auto; }0
.demo .box { flex-basis: 0; }100px
.demo .box { flex-basis: 100px; }50%
.demo .box { flex-basis: 50%; }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
#- Zapis
flex: 1 1 200pxto prosty sposób na kolumny, które zawijają się, gdy robi się za wąsko. - Gdy ustawisz i
width, iflex-basis, pierwszeństwo maflex-basis(poza wartościąauto).
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.