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

cssseletor {
  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:

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

css.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:

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

css.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