Atributo flex-basis do CSS

Definição e uso

A propriedade flex-basis define a largura inicial do item flexível.

Notas:Se o elemento não for um item flexível, a propriedade flex é inválida.

Veja também:

Tutorial CSS: Caixa flexível CSS

Manual CSS:Propriedade flex

Manual CSS:Propriedade flex-direction

Manual CSS:Propriedade flex-flow

Manual CSS:Propriedade flex-grow

Manual CSS:Propriedade flex-shrink

Manual CSS:Propriedade flex-wrap

Manual HTML DOM:Propriedade flexBasis

Exemplo

Defina a largura inicial do segundo item flexível para 100 pixels:

div:nth-of-type(2) {
  flex-basis: 100px;
}

Experimente você mesmo

Sintaxe CSS

flex-basis: number|auto|initial|inherit;

Valor da propriedade

Valor Descrição
number Unidade de comprimento ou porcentagem, define a largura inicial do item flexível.
auto Valor padrão. A largura é igual à do item flexível. Se esse item não tiver uma largura definida, a largura será baseada no conteúdo.
initial Defina essa propriedade para seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: auto
Herança: Não
Produção de animação: Suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe JavaScript: object.style.flexBasis="200px"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Números com -webkit- ou -moz- indicam a primeira versão com prefixo usada.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0