0

Galera, tudo bom com vocês?

Estou estudando o CSS flexbox e na parte sobre a flexibilidade que cada item pode ter fiquei com a seguinte dúvida:

No exemplo em anexo, os itens ultrapassam 150px do seu contêiner, usando a propriedade flex e setando o flex-shrink para 1 em ambos os itens flex, como é feito a redução proporcional quando se tem flex-basis diferentes? Existe uma forma deu saber o quanto ele vai reduzir sem eu precisar olhar na ferramenta de desenvolvedor ou seja o cálculo?

A primeira div fica com 307.6875px e a segunda com 192.3125px, até então eu achei que simplesmente seria descontado 75px de cada div (o espaço negativo é 150 e a proporção é de 1/2), mas devido aos tamanhos diferentes usado no flex-basis eu fiquei sem entender.

Justificando meu raciocínio:

Quando os width dos itens são iguais, verifiquei que simplesmente os itens são reduzidos proporcionalmente com relação ao tanto que passou (espaço negativo), então se passou 150px e ambos os itens tivessem o mesmo flex-basis, cada um seria reduzido em 75px de seu tamanho. Foi o que eu entendi pelo menos, me desculpe caso eu esteja equivocado.

Agradeço a ajuda.

var exibeLargura1 = document.querySelector(".largura1");
var exibeLargura2 = document.querySelector(".largura2");

var larguraBx1 = document.querySelector(".box1").getBoundingClientRect();
var larguraBx2 = document.querySelector(".box2").getBoundingClientRect();
             
exibeLargura1.textContent = larguraBx1.width;
exibeLargura2.textContent = larguraBx2.width;
.container {
    width: 500px;
    height: 80px;
    background: sandybrown;
    color: white;
    display: flex;
}

.box1 {
    background-color: red;
    width: 400px;
    flex: 0 1 auto;
}

.box2 {
    background-color: green;
    width: 250px;
    flex: 0 1 auto;
}
<body>
  <div class="container">
    <div class="box1"><span>1</span></div>
    <div class="box2"><span>2</span></div>
  </div>
  
  <p>O tamanho do box 1 é: <span class="largura1"></span>, do box 2 é: <span class="largura2"></span></p>
</body>

4
  • 1
  • Eae Hugo, então cara me trouxe mais entendimento sobre o assunto, mas me gerou uma dúvida maior, pois se eu colocar conteúdos de diferentes tamanhos o comportamento irá se modificar pelo o que eu entendi. Fiquei realmente sem entender completamente como funcionam essas propriedades. No meu caso era mais para compreensão, um exemplo bem simples só para ver se tinha como prever o quanto iria reduzir quando se tem diferentes width (para os filhos). Commented 26/03/2020 às 2:15
  • Cara não é assim que funciona, com certeza a conta é bem mais complexa que isso! Ainda mais que vc está misturando flex com width... recomendo essa leitura developer.mozilla.org/en-US/docs/Web/CSS/flex
    – hugocsl
    Commented 26/03/2020 às 11:35
  • Eu li esses tutoriais da msm ontem e hoje, aquele post que você referenciou, quanto os itens tinham o mesmo tamanho dava para fazer na mão o quanto cada um ia crescer (exemplo), mas imaginei que não seria uma conta simples quando os tamanhos fossem diferentes... mas o width é utilizado pelo flex-basis, quando ele está em auto certo? Para definir o tamanho inicial do item antes de aplicar a redução/crescimento. Commented 26/03/2020 às 17:17

0

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

Pesquise outras perguntas com a tag .