First, the flex property is a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`. The default
value is 0 1 auto. The last two attributes are optional.
.item {flex: 1} means .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } Your answer:
flex
-grow: Define the enlargement ratio of the item , the default is 0, that is If there is remaining space, do not zoom in.
If the `flex-grow` property of all items is 1, when the parent box has remaining space, then the child box will divide the remaining space equally
If the `flex-grow` property of one item is 2, and the other items are 1, then the former The remaining space occupied will be double that of other items.
flex-shrink: Define the shrinkage ratio of the item , the default is 1.
If the `flex-shrink` property of all items is 1, when the parent space is insufficient, then the child boxes will be proportionally reduced.
If the `flex-shrink` property of an item is 0 and other items are 1, the former will not shrink when there is insufficient space.
flex-basis: used to set the base width of the box , its default value is auto, which is the original size of the item.
And basis and width exist at the same time, basis will kill width
So the logic of flex: 1 is to replace the width with flex-basis, and then use flex-grow to equally divide the remaining space and flex-shrin to shrink it proportionally.
The above is sorted by hand, I hope it can help you! Thanks!