0
Everybody, good to you?
I am studying the CSS flexbox and in the part about the flexibility that each item can have I have the following question:
In the attached example, the items exceed 150px of your container, using the flex property and setting the flex-Shrink to 1 on both flex items, how is the proportional reduction made when you have different flex-Basis? There is a way to know how much it will reduce without I need to look at the developer tool or the calculation?
The first div is with 307.6875px and the second with 192.3125px, until then I thought it would simply be discounted 75px from each div (the negative space is 150 and the ratio is 1/2), but due to the different sizes used in flex-Basis I did not understand.
Justifying my reasoning:
When the width of the items is equal, I found that simply the items are reduced proportionally with respect to the amount that has passed (negative space), so if 150px had passed and both items had the same flex-Basis, each would be reduced by 75px its size. That’s what I understood at least, I’m sorry if I’m wrong.
I appreciate the help.
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>
This answers your question? Is there a difference between flex-Basis, flex-Grow and width? What is the recommendation of using them in a Flex container?
– hugocsl
Eae Hugo, then guy brought me more understanding on the subject, but generated me a bigger doubt, because if I put content of different sizes the behavior will change by what I understood. I really did not fully understand how these properties work. In my case it was more for understanding, a very simple example just to see if you could predict how much you would reduce when you have different width (for children).
– Enkindu Weles
Face is not how it works, sure the account is much more complex than that! Even more that you are mixing flex with width... I recommend this reading https://developer.mozilla.org/en-US/docs/Web/CSS/flex
– hugocsl
I read these tutorials from msm yesterday and today, that post that you referenced, how much the items had the same size to do in hand how much each one would grow (example)but I figured it wouldn’t be a simple account when the sizes were different... but the width is used by flex-Basis, when it’s in auto right? To set the initial item size before applying reduction/growth.
– Enkindu Weles