In this section, we will learn what the flex property is and how to use it in CSS.

Click here to run the example of flex property.

CSS flex Property Definition and Usage

In the `flex-grow`, `flex-shrink`, `flex-basis` sections, we have introduced how to grow, shrink and set the basic width for each flex-item, respectively. But using these three properties can be tedious if there are many flex-items to apply these properties to.

For this reason, CSS provided a shorthand property named `flex` by which we can set the values for `flex-grow`, `flex-shrink` and `flex-basis` at the same time in one declaration.

CSS flex Property Syntax

flex: f-grow f-shrink f-basis;

flex: f-grow f-basis;

flex: f-grow f-shrink;

flex: f-grow;

flex: f-shrink;

CSS flex Property Value

• f-grow: This value controls the `flex-grow` property. It is optional and, if ignored, the default value, which is 0, will be used instead.
• f-shrink: This value controls the `flex-shrink` property. It is optional and, if ignored, the default value which is “auto” will be used instead.
• f-basis: This value controls the `flex-basis` property. It is optional and, if ignored, the default value, which is 1, will be used instead.

There are three keywords that can be set for this property as well:

• auto: using this keyword is equal to setting the value: 1 1 auto;
• none: using this keyword is equal to setting the value :0 0 auto;
• initial: using this keyword is equal to setting the value: 0 1 auto;

Example: display flex in CSS

See the Pen display flex in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.