CODEWITHSUNDEEP
cssflexboxspecificationsflex-grow
KestVir
KestVir

Reputation: 350

Omitting the flex-grow value in flex shorthand

In this resource: https://www.w3.org/TR/css-flexbox-1/#propdef-flex it says that, when using the flex shorthand, if you omit flex-grow, it is set to 1. But how can you omit it in the first place?

Upvotes: 1

Views: 180

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371719

In the same flex property definition your referenced, it also says this:

Value: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

The double bar (||) separates two or more options, and one or more must be specified (source).

This means that the flex-grow property can be omitted by writing something like this:

flex: auto

or

flex: 250px

or

flex: 33%

All of the above specify the flex-basis component.

The (omitted) flex-shrink defaults to 1, as defined in the spec.

The (omitted) flex-grow defaults to 1, as defined in the spec.

Just FYI, the question mark (?) in the value syntax means that the preceding property is optional. This means that when the browser sees something like this: flex: 2 15em, the unitless number is applied to flex-grow, because flex-shrink is optional, and defaults to 1 (source).

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42354

By simply writing flex: 1. This is the shorthand for writing:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

So flex-grow is set to 1 by default.

If you manually specify something like:

flex: 1;
flex-shrink: 0;

Then flex-shrink will be 0, and flex-grow will still be 1.

Also, note that you'll need display: flex on the parent in order to use flex to being with!

Hope this helps! :)

Upvotes: 0

Related Questions