When you point a flex: 3
item to flex: 3
(item 6) or flex: 1
(items 5 and 7), how does this property shorten:
flex: ? = <flex-grow>, <flex-shrink>, <flex-basis> flex: 3 = flex-grow: 3, flex-shrink: 1, flex-basis: 0 flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0
In both cases, the flex-shrink
coefficient is 1, which means that the flexibility element is allowed to be proportionally reduced.
To prevent flex elements from being compressed, which could cause misalignment, I would change the flex-shrink
value to 0.
Instead of flex: 3
and flex: 1
try:
flex: 3 0 0; flex: 1 0 0;
More details in the flexbox specification: 7.1.1. Basic flex
values
But you may have another problem. You wrote:
Note that points 5 and 7 are set the same in css, with flex
values โโof 1
. That is, point 6 is 3 times the height of points 5 and 7. As such, when element 6 changes, a 3: 1 ratio is maintained.
This is not working property flex-grow
.
When you apply flex-grow: 3
to a flex element, you tell it to consume three times as much free space as flex elements with flex-grow: 1
. This does not necessarily mean that paragraph 6 will be three times the size of paragraphs 5 and 7.
Learn more about how flex-grow
works here: flex-grow does not pick up the flex items as expected
As an alternative calibration method, you can use the flex-basis
property. Try flex: 0 0 60%
in point 6 and flex: 0 0 20%
in points 5 and 7.