The flex CSS property is a shorthand property that combines three individual flexbox properties: flex-grow, flex-shrink, and 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.
For example, 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.