Obteve o mesmo por uma inocente coincidência, isto é, nesta situação em particular resultou na mesma coisa, sendo dois elementos filhos e usando 50%. Nem sempre - na verdade quase nunca - terá essa sorte em desenvolvimento.
width
define a largura do elemento, não importa o resto;
flex-basis
define a referência inicial do elemento antes de distribuir o espaço;
flex-grow
define como o espaço do elemento pai será distribuído entre os filhos;
Devemos lembrar que, por omissão, flex
terá o valor 0 1 auto
, o que configura flex-grow
como 0, flex-shrink
como 1 e flex-basis
como auto
.
Width
Assim, utilizando width
nos elementos filhos com o pai flex
terá um comportamento peculiar devido ao fato que por ser flex
o espaço será distribuído entre os filhos enlargando-os conforme suas regras ou encurtando-os se ocorrer overflow no elemento pai. Acontece que colocar width: 50%
em dois elementos filhos você mascara o comportamento de flex
, pois naturalmente irá ocupará toda a largura do elemento pai, sem overflow. Porém, tente colocar mais elementos filhos ou uma largura maior que 50%:
Elemento pai flex com filhos maiores que 50%
.pai {
display: flex;
background: lightgray;
}
.filhos {
width: 80%;
border: 1px solid black;
}
<div class="pai">
<div class="filhos">short</div>
<div class="filhos">looooooooooooooong</div>
</div>
O que acontece é que a propriedade width: 80%
será ignorada devido a ocorrer overflow no elemento pai e, portanto, os 80% deixam de ser seguidos, mantendo a regra básica definida por flex
.
Elemento pai flex com mais de dois filhos
.pai {
display: flex;
background: lightgray;
}
.filhos {
width: 50%;
border: 1px solid black;
}
<div class="pai">
<div class="filhos">short</div>
<div class="filhos">looooooooooooooong</div>
<div class="filhos">short</div>
</div>
De forma semelhante, quando há mais de dois elementos com largura 50% novamente ocorreria o overflow no elemento pai, fazendo os elementos reduzirem a aproximadamente 33% da largura total (para 3 filhos).
Ou seja, o width
não faz o que parece fazer, só produziu o resultado esperado por coincidência de ter utilizado os valores corretos.
Flex-grow
A propriedade flex-grow
determina como o espaço livre disponível no elemento pai será distribuído para os elementos filhos. Você utilizou flex-grow: 1
, o que determina que todos os elementos filhos irão crescer de modo equivalente. A coincidência que ocorreu neste caso foi que ambos os elementos possuem exatamente o mesmo conteúdo: nenhum. Possuindo o mesmo conteúdo os elementos irão crescer de forma idêntica, porém se um dos elementos possuir uma largura de conteúdo diferente do outro, isso não ocorre. Vejamos um exemplo:
Elementos filhos com flex-grow:1 e conteúdo distinto
.pai {
display: flex;
background: lightgray;
}
.filhos {
flex-grow: 1;
border: 1px solid black;
}
<div class="pai">
<div class="filhos">short</div>
<div class="filhos">looooooooooooooong</div>
<div class="filhos">short</div>
</div>
O segundo filho possui um conteúdo diferente dos outros dois. Não só diferente como maior. Determinamos ainda que o espaço livre do elemento pai deve ser dividido de forma igualitária para os elementos filhos - e isso não significa que os filhos terão a mesma largura no final. Se eu quero dividir R$ 30,00 de forma igual entre 3 pessoas, darei R$ 10,00 a cada uma. Se uma das três pessoas já tiver inicialmente mais dinheiro que as outras, ela naturalmente terá mais dinheiro depois que eu der os R$ 10,00. O mesmo acontece com os elementos filhos. Inspecione o resultado do exemplo acima e verá que o segundo elemento possuirá uma largura maior que os outros dois.
O que define a largura de referência é justamente flex-basis
. Como comentamos inicialmente, por omissão flex-basis
terá o valor auto
, que levará em consideração o valor de width
, que por omissão também terá o valor auto
. Assim, os elementos crescem considerando a largura inicial.
Flex-basis
A propriedade flex-basis
determinará qual será a referência para que um elemento cresça dentro de um elemento flex
. Por omissão o valor será auto
, o que, dependendo do elemento, irá considerar a largura mínima do elemento conforme o seu conteúdo, porém você pode determinar uma largura específica como referência e todos os elementos serão redimensionados a partir dela.
Elementos filhos com flex-basis: 50%
.pai {
display: flex;
background: lightgray;
}
.filhos {
flex-basis: 50%;
border: 1px solid black;
}
<div class="pai">
<div class="filhos">short</div>
<div class="filhos">looooooooooooooong</div>
<div class="filhos">short</div>
</div>
O que acontecerá neste exemplo é que, diferente de apenas utilizar o flex-grow
, a largura de referência será 50% do elemento pai. Desta forma, os três elementos filhos partirão da mesma largura de referência e quando redimensionados pelo flex possuirão a mesma largura final. Ao inspecionar o resultado verá que os três elementos possuem a mesma largura. A coincidência foi ter apenas dois elementos filhos, partindo da mesma largura de referência, sendo redimensionados para o mesmo valor final.
Concluindo, as três propriedades não fazem a mesma coisa. A width
determina a largura do elemento, independente da forma que irá redimensionar; a flex-grow
determina como o elemento será redimensionado considerando o espaço vazio no elemento pai e flex-basis
determina qual a largura de referência antes de redimensionar o elemento com flex-grow
.
O que devo considerar para escolher entre uma e outra?
Você não considera entre uma ou outra, elas são complementares entre si e utiliza as que necessitar para obter o resultado desejado.
- Preciso de elementos que ocupem metade do elemento pai:
width: 50%
, sem flex
;
- Preciso de elementos que ocupem toda a largura do elemento pai crescendo de forma igual:
flex-grow: 1
;
- Preciso de elementos que cresçam a partir de um mesmo valor:
flex-basis: 1
;
Para o seu exemplo, se precisa que os elementos tenham sempre 50% da largura do elemento pai, utilize o width: 50%
e esqueça o flex
. Se você quer que eles cresçam até ocuparem todo o elemento pai, utilize flex-grow: 1
. Se você precisa que ao final eles possuam a mesma largura, utilize flex-basis
para definir a mesma referência.