What am I telling flexbox with this option flex: 1 0 auto?

What does the 1, the 0 and the car mean?flex: 1 0 auto;

The 3 values ​​are: flex-grow | flex-shrink | flex-basis

<'flex-grow'>
Defines the flex-growof the flex element. See <number>for more details. Negative values ​​are not considered valid. Defaults to 1 when omitted.

The flex-growCSS property specifies the growth factor of a flex element. Specifies how much space the element should occupy within the flex container.

• In your case 1, that is, the size is proportional to 1.

<'flex-shrink'>
Defines the flex-shrinkof the flex element. See <number>for more details. Negative values ​​are not considered valid. Defaults to 1 when omitted.

The flex-shrinkCSS property specifies the flex shrinkage factor of a flex element.

• In your case 0, that is, it will shrink 0 times faster than its siblings.

<'flex-basis'>
Defines the flex-basisof the flex element. Any valid value for the width and height properties is accepted. A preferred size of 0 must have a unit to avoid being interpreted as flexible. Defaults to 0% when omitted.

The flex-basisCSS property specifies the flex base, which is the initial size of a flex element. This property determines the size of a content box unless otherwise specified using box-sizing.

• In your case auto, that is, its initial size will be calculated automatically.

Source: flex - CSS | mdn

Common flex values:

Flex: 0 car;

This is the same flex: initial;as the shorthand for the default value: flex: 0 1 auto. The size of the element is given based on its width/height (or its content if not set).

Flex: auto;

This is equivalent to flex: 1 1 auto. Be careful, this is not the default value. It resizes the element based on its width/height, but makes it totally flexible, so it absorbs any extra space along the main axis.

Flex: none;

This is equivalent to flex: 0 0 auto. It resizes the element according to its width/height, but makes it totally inflexible.

Font

csscss3 _

According to the w3c.org documentation (official site), the property flexallows a container to allocate free space to its elements (proportional to their flex factor grow) to fill the container, or shrink them (proportional to the flex factor shrink) to prevent overflow . (overflow).

As you can see, the documentation tells you about two properties of the elements that are contained in a container flexin its own definition. However, the property flexcan take the following values:

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

And the initial value for the property flexis:

flex: 1 0 auto

Each of the possible values ​​of the property flexcorresponds to:

• flex-grow: This is the growth factor. Corresponds to a number that determines how much the flex item will grow relative to the rest of the flex items inside the container flexif there is free space. When omitted it is equivalent to putting a 1.

• flex-shrink: This value specifies the shrink factor and is what determines how much the flex item will shrink relative to the rest of the flex items inside the container flexif the container runs out of space. When omitted it is equivalent to putting a 1.

• flex-basis: This value specifies the initial value of a flex element before free space is distributed according to the flex factors ( flex-growand flex-shrink). When omitted its default value is 0.

The values ​​it can take flex-basisare:

• auto: When it takes this value, it flex-basistakes the value of the main size property used as flex-basis. If this value is autoby itself, then the value used is content.

• content: Indicates automatic resizing based on the content of the flex item.

• width: For all other values, flex-basisit is resolved in the same way as width and height.

• none: The value none is equivalent to 0 0 auto.

Finally, I leave an image also taken from the documentation in which it differentiates between establishing "absolute" flex (starting with a flex-basis0) or a "relative" flex (starting from the size of the element's content as a base). The three elements have flex factors of 1, 1 and 2 respectively. Notice that the element with a flex factor of 2 grows double.