Den flex-basis
egenskapen är en sub-egenskap hos den flexibla Box Layout modul.
Den anger den initiala storleken på flexartikeln innan något tillgängligt utrymme fördelas enligt flexfaktorerna. När den utesluts från flex
förkortningen är dess angivna värde längden noll.
Ett flex-basisvärde som är inställt på att auto
dimensionera elementet enligt dess storleksegenskap (vilket i sig kan vara nyckelordet auto
, som storlekar elementet baserat på dess innehåll).
Syntax
flex-basis: .flex-item ( flex-basis: 100px; )
Observera att negativa längder är ogiltiga när det gäller alla bredd.
Demo
Kolla in den här pennan!
Webbläsarstöd
- (modern) betyder den senaste syntaxen från specifikationen (t.ex.
display: flex;
) - (hybrid) betyder en udda inofficiell syntax från 2011 (t.ex.
display: flexbox;
) - (gammal) betyder den gamla syntaxen från 2009 (t.ex.
display: box;
)
Krom | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
21+ (modern) 20- (gammal) | 3.1+ (gammal) | 2-21 (gammal) 22+ (ny) | 12.1+ (modern) | 10+ (hybrid) | 2.1+ (gammal) | 3.2+ (gammal) |
Blackberry webbläsare 10+ stöder den nya syntaxen.
För mer information om hur man blandar syntaxer för att få bästa webbläsarstöd, se den här artikeln (CSS-Tricks) eller den här artikeln (DevOpera).