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:
<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;
}
:
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;
}
:
Crie 5 blocos flex. Defina a
largura ao longo do eixo principal como 100px.
Observe o comportamento dos blocos
ao longo de diferentes eixos.
Se o eixo for horizontal e a propriedade
flex-basis for definida para o bloco, bem como a propriedade
width, então flex-basis terá
prioridade. Verifique isso.
Se o eixo for vertical e a propriedade
flex-basis for definida para o bloco, bem como a propriedade
height, então flex-basis terá
prioridade. Verifique isso.
