De flex-basiseigenschap is een subeigenschap van de module Flexible Box Layout.
Het specificeert de initiële grootte van het flexitem, voordat beschikbare ruimte wordt verdeeld volgens de flexfactoren. Wanneer weggelaten uit de flexafkorting, is de opgegeven waarde de lengte nul.
Een flex-basiswaarde die is ingesteld om de autogrootte van het element te bepalen op basis van de eigenschap size (die zelf het sleutelwoord kan zijn auto, dat de grootte van het element op basis van de inhoud bepaalt).
Syntaxis
flex-basis: .flex-item ( flex-basis: 100px; )Houd er rekening mee dat, net als voor elke breedte, negatieve lengtes ongeldig zijn.
Demo
Browser-ondersteuning
- (modern) betekent de recente syntaxis van de specificatie (bijv.
display: flex;) - (hybride) betekent een vreemde onofficiële syntaxis uit 2011 (bijv.
display: flexbox;) - (oud) betekent de oude syntaxis van 2009 (bijv.
display: box;)
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (oud) | 3.1+ (oud) | 2-21 (oud) 22+ (nieuw) | 12.1+ (modern) | 10+ (hybride) | 2.1+ (oud) | 3.2+ (oud) |
Blackberry browser 10+ ondersteunt de nieuwe syntaxis.
Raadpleeg dit artikel (CSS-Tricks) of dit artikel (DevOpera) voor meer informatie over het mixen van syntaxis om de beste browserondersteuning te krijgen.