flex layout, two sub-items flex-grow: 1, one of which added padding, is no longer evenly divided
novice, to find a solution! Thanks"()"
<style>
.parent {
display: flex;
}
.kid {
flex-grow: 1;
border: 2px black solid;
}
.kid .b {
padding: 0 100px;
}
</style>
<div class="parent">
<div class="kid">A</div>
<div class="kid">
<div class="b">B</div>
</div>
</div> 
fle-grow means that if there is spare space after the element is laid out according to css, the element itself is not allocated proportionally to allow the element to divide the space equally.
has not been carefully studied, it should not be limited width. .kid add width:50%
agree with the first floor, just these two days in the study of flex, first you have to understand the distribution principle of flex-grow.
first of all, take iphone6 as an example to comment out flex-grow:1 temporarily. The total width is 375.The width of two elements (AMagneB) is AREV 11.27 BRV 210.05 (with padding value), so there is 149.68 left. Because the flex-grow value of both elements (Ameme B) is 1, then the remaining elements will be divided into two parts (149.68), and then they will be divided into two elements (AMague B), and then they will be divided into two elements (AMague B), and then the remaining elements will be divided into two parts (AMague B), and then the remaining elements will be divided into two parts (AMague B). So the width of An is 11.2776.84 = 88.11B and the width is 210.05 + 76.84 = 286.89. Then we open the comments in flex-grow:1 and examine the element
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
this padding is too big
after adding padding , the width should be more than half of the total width
Previous: How to find out if an app is developed natively, or by RN or Cordova?
Next: V-model binding problem