flex CSS property is a shorthand property that combines three individual flexbox properties:
flex-basis. It is used to define the flexible behavior of a flex item within a flex container. The
flex property accepts up to three values:
flex-grow: Specifies how much the flex item can grow relative to other flex items.
flex-shrink: Specifies how much the flex item can shrink relative to other flex items.
flex-basis: Specifies the initial size of the flex item before any remaining space is distributed.
flex: 1 0 200px; sets the flex item to have a flex-grow value of 1, a flex-shrink value of 0 (it won’t shrink), and an initial width of 200 pixels. The
flex property provides a convenient way to set multiple flex-related properties in a single declaration.