Tamanho do elemento flex ao longo do eixo principal

As propriedades width e height definem a largura e a altura do elemento flex independentemente da direção dos eixos. Ou seja, se o eixo for horizontal, width definirá a largura, mas se o eixo for vertical, width ainda definirá a largura. Às vezes, esse comportamento não é conveniente.

No modelo flex, existe uma propriedade especial flex-basis, que 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 - definirá a altura. Esta propriedade deve ser definida nos próprios elementos flex, e não no seu pai. Vamos ver em exemplos.

Suponha que o eixo principal seja horizontal agora, 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;
}

Результат:

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;
}

Результат: