Principle of flex:1

flex It's actually flex-grow、flex-shrink and flex-basis Abbreviation of three attributes .

flex-grow Property specifies flex How much space left in the container should be allocated to the project

If only one element is set flex-grow attribute , Then the element will get all the remaining space of the parent element ,flex：1, It's set up flex-grow:1, Other elements are not set , So this element will get all the remaining space of the parent element