CODEWITHSUNDEEP
cssflexboxspecifications
S.B
S.B

Reputation: 16526

How flex: 100% works in css?

As MDN web docs states : "flex property is a shorthand for the "flex-grow", "flex-shrink", "flex-basis".

One-value syntax: the value must be one of:

a <number>: In this case it is interpreted as flex: <number> 1 0; the "flex-shrink" value is assumed to be 1 and the "flex-basis" value is assumed to be 0.

Here is an example of w3school which controls the container's layout by putting flex: 50% and flex: 100% to the child columns after affecting the media query.

It's obvious that this 100% is not for flex-growing, it's used as flex-basis. But how is that possible? If there is single value, It should be assumed for flex-grow.

Am I missing something here? Is that because of % that causes to be counted for flex-basis?

Upvotes: 1

Views: 957

Answers (1)

Temani Afif
Temani Afif

Reputation: 273571

If your refer to the Specification you can read:

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

The || means:

A double bar (||) separates two or more options: one or more of them must occur, in any order.

If you specify a percetange value it's clearly not <'flex-grow'> <'flex-shrink'>? so it's <'flex-basis'>

If you specify a number then it cannot be <'flex-basis'> because it doesn't accept number so it will be <'flex-grow'> <'flex-shrink'>? and the ? means:

A question mark (?) indicates that the preceding type, word, or group is optional (occurs zero or one times).

So it's <'flex-grow'>

Here is more combinations:

flex: 1 1 --> <'flex-grow'> <'flex-shrink'>

flex: 1 50% 
  1   -->  <'flex-grow'> <'flex-shrink'>? --> <'flex-grow'>
  50% --> <'flex-basis'>

Upvotes: 3

Related Questions