4

Estou com uma duvida técnica sobre a utilização das propriedade flex-basis, flex-grow e width. Repare que na imagem abaixo eu consegui o mesmo resultado usando as 3 propriedades.

Ai fiquei na dúvida, se as 3 propriedades fazem a mesma coisa o que devo considerar para escolher entre uma e outra?

Existe de fato alguma diferença técnica entre uma e outra, ou posso usar qualquer uma delas?

inserir a descrição da imagem aqui

Esse é o código da imagem acima:

html, body {
    margin: 0;
    padding: 0;
}
.container {
    display: flex;
    width: 100%;
}
.box {
    box-sizing: border-box;
    border: 1px solid #000;
    height: 20px;
}
.container.b .box {
    flex-basis: 50%;
}
.container.w .box {
    width: 50%;
}
.container.f .box {
    flex-grow: 1;
}

    
    
<p>pai flex e filho com flex-basis</p>
<div class="container b">
    <div class="box"></div>
    <div class="box"></div>
</div>
<p>pai flex e filho com width</p>
<div class="container w">
    <div class="box"></div>
    <div class="box"></div>
</div>
<p>pai flex e filho com flex-grow</p>
<div class="container f">
    <div class="box"></div>
    <div class="box"></div>
</div>

2

2 Respostas 2

3

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.

1
  • Valeu Anderson isso ajuda bastante a clarear as ideia!
    – hugocsl
    Commented 28/01/2019 às 14:05
2

flex-basis

Define a largura inicial do elemento. A largura do elemento é flexível, podendo aumentar caso não haja quebra de linha, mas também a largura pode ser reduzida caso outro elemento a force. No exemplo abaixo o .box2 do primeiro .container não há quebra de linha (por causa do &nbsp;) e seu conteúdo, por ser muito largo, força a largura do .box1 ser menor do que foi definido no flex-basis de 50%.

Exemplo:

.container{
   display: flex;
}

.box{
   border: 1px solid black;
}

.box1{
   flex-basis: 50%;
}

.box2{
   flex-basis: 20%;
}
<div class="container">
   <div class="box box1">
      box1 - mínimo 50% do container, com quebra de linha
   </div>
   <div class="box box2">
      box2&nbsp;-&nbsp;mínimo&nbsp;20%&nbsp;do&nbsp;container,&nbsp;sem&nbsp;quebra&nbsp;de&nbsp;linha
   </div>
</div>

<div class="container">
   <div class="box box1">
      box1 - mínimo 50% do container, com quebra de linha
   </div>
   <div class="box box2">
      box2
   </div>
</div>

flex-grow

Define a largura do elemento em relação aos outros elementos do mesmo container. Se houver apenas 1 elemento, irá ocupar a largura toda, pois não há com quem ser comparado.

O valor dessa propriedade é numérico, ou seja, não possui uma unidade de medida (px, %, vw etc.). O CSS irá somar todos os valores dos flex-grow dos elementos e dividir a largura do container entre eles proporcionalmente ao seu valor.

Exemplo:

.container{
   display: flex;
   min-height: 20px;
}

.box{
   border: 1px solid black;
}

.box1{
   flex-grow: 1;
}

.box2{
   flex-grow: 4;
}

.box3{
   flex-grow: 5;
}
<div class="container">
   <div class="box box1">
   </div>
   <div class="box box2">
   </div>
   <div class="box box3">
   </div>
</div>

<div class="container">
   <div class="box box1">
      box1
   </div>
   <div class="box box2">
   </div>
   <div class="box box3">
   </div>
</div>

Veja que no primeiro container o .box1 e .box2 ocupam exatamente a metade do container, isso porque somando os valores dos 3 boxes vazios (1 + 4 + 5 = 10), logo 1 + 4 = 5, a metade do total de 10.

Repare também que no segundo container há texto no .box1, e o espaço ocupado pelo texto é considerado pelo flex-grow. Em razão disso, há uma redução forçada do .box3 proporcional à largura ocupada pelo texto do .box1.

width

Define uma largura fixa ao elemento. Mesmo que não haja quebra de linha, a largura não é flexível e se o conteúdo ultrapassar a largura do elemento, ele não se expande.

Exemplo:

.container{
   display: flex;
}

.box{
   border: 1px solid black;
}

.box1{
   width: 10%;
}
<div class="container">
   <div class="box box1">
      Texto&nbsp;sem&nbsp;quebra&nbsp;de&nbsp;linha
   </div>
</div>

<div class="container">
   <div class="box box1">
      Texto com quebra de linha
   </div>
</div>


As diferenças técnicas são as acima, então você deve usar a que melhor for conveniente. O que você pode considerar para usar uma delas, além da sua necessidade, é a questão de compatibilidade, principalmente as propriedades flex-basis e flex-grow, que são especificações mais modernas. Veja as tabelas informadas pelo site Can I Use (ambas possuem a mesma tabela e observações):

flex-basis e flex-grow

1
  • Muito boa explicação Tio!
    – hugocsl
    Commented 28/01/2019 às 14:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .