Flex-bas - CSS-tricks

Anonim

Den flex-basisegenskapen ä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 flexförkortningen är dess angivna värde längden noll.

Ett flex-basisvärde som är inställt på att autodimensionera 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).