Propriedade flex-basis

A propriedade flex-basis define o tamanho de um bloco flex específico antes da aplicação das demais propriedades flex. Em geral, a propriedade define o tamanho do elemento ao longo do eixo principal. Isso significa que se o eixo principal for horizontal - esta propriedade definirá a largura dos elementos, e se for vertical - a altura.

Aplica-se a um bloco flex específico.

Esta propriedade é uma parte componente da propriedade abreviada flex.

Sintaxe

seletor {
	flex-basis: quaisquer unidades CSS (e percentuais) | auto;
}

Valor padrão: auto.

Exemplo

Suponha que o eixo principal esteja disposto horizontalmente e flex-basis tenha o valor 50px. Neste caso, a largura dos elementos será 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent	{
	display: flex;
	flex-direction: row; /* eixo horizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* tamanho do elemento */
	border: 1px solid green;
}

Exemplo

Agora vamos inverter o eixo, sem alterar o valor da propriedade flex-basis. Neste caso, a altura dos elementos será 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* eixo vertical */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Veja também

propriedade flex-direction,
que define a direção dos eixos dos blocos flex
propriedade justify-content,
que define o alinhamento ao longo do eixo principal
propriedade align-items,
que define o alinhamento ao longo do eixo transversal
propriedade flex-wrap,
que define a quebra de linha dos blocos flex
propriedade flex-flow,
abreviação para flex-direction e flex-wrap
propriedade order,
que define a ordem dos blocos flex
propriedade align-self,
que define o alinhamento de um bloco específico
propriedade flex-grow,
que define a capacidade de expansão dos blocos flex
propriedade flex-shrink,
que define a capacidade de redução dos blocos flex
propriedade flex,
abreviação para flex-grow, flex-shrink e flex-basis