A flex-basispropriedade é uma subpropriedade do módulo Layout de caixa flexível.
Ele especifica o tamanho inicial do item flexível, antes que qualquer espaço disponível seja distribuído de acordo com os fatores flexíveis. Quando omitido da flexabreviação, seu valor especificado é o comprimento zero.
Um valor de base flexível definido para autodimensionar o elemento de acordo com sua propriedade size (que pode ser a palavra-chave auto, que dimensiona o elemento com base em seu conteúdo).
Sintaxe
flex-basis: .flex-item ( flex-basis: 100px; )Observe que, como para qualquer largura, comprimentos negativos são inválidos.
Demo
Suporte para navegador
- (moderno) significa a sintaxe recente da especificação (por exemplo
display: flex;) - (híbrido) significa uma sintaxe não oficial estranha de 2011 (por exemplo
display: flexbox;) - (antigo) significa a sintaxe antiga de 2009 (por exemplo
display: box;)
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderno) 20- (antigo) | 3.1+ (antigo) | 2-21 (antigo) 22+ (novo) | 12,1+ (moderno) | 10+ (híbrido) | 2.1+ (antigo) | 3.2+ (antigo) |
O navegador Blackberry 10+ suporta a nova sintaxe.
Para obter mais informações sobre como misturar sintaxes para obter o melhor suporte do navegador, consulte este artigo (CSS-Tricks) ou este artigo (DevOpera).