Skip to main content
adicionou 625 caracteres ao conteúdo
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221
  • 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.

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

Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

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.