Flex :1, 1, 0; If the value of 1 is set to flex-grow, the default value is 1 if flex-shrink is not set, which is the same as the default value. Flex :1 === flex:1 1 auto; If flex defines only a numeric value, the value of flex-basis is 0. Flex :1, 1, 0;

Verify on Chrome, set Flex :1;

On Chrome, set Flex :1 1 0;

flex

define

The Flex CSS shorthand property sets how an elastic item can grow or shrink to fit the space available in its elastic container

composition

  • flex-grow
  • flex-shrink
  • flex-basis

The initial value

  • flex-grow: 0
  • flex-shrink: 1
  • flex-basis: auto

grammar

/* Keyword value */
flex: auto;
flex: initial;
flex: none;

/* One value, no unit number: flex-grow */
flex: 2;

/* a value, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/ * two values: flex - turns up | flex - basis * /
flex: 1 30px;

/ * two values: flex - turns up | flex - the shrink * /
flex: 2 2;

/ * three values: the flex - turns up | flex - the shrink | flex - basis * /
flex: 2 2 10%;

/* Global attribute value */
flex: inherit;
flex: initial;
flex: unset;
Copy the code

You can specify flex properties with one, two, or three values.

Single-valued syntax: The value must be one of the following:

  1. A unitless number (<number>): It will be taken asflex:<number> 1 0; <flex-shrink>Is assumed to be1And then<flex-basis>Is assumed to be0.
  2. A valid width value: it will be taken as the value of.
  3. Keyword none, auto, or initial.

Double-valued syntax: The first value must be a unitless number, and it is treated as the value of

. The second value must be one of the following:

  1. A unitless number: it will be treated as a value.
  2. A valid width value: it will be treated as the value of.

Ternary syntax:

  1. The first value must be a unitless number, and it will be treated as the value of.
  2. The second value must be a unitless number, and it will be treated as the value of.
  3. The third value must be a valid width value, and it will be treated as the value of.

The values

The initial element is sized according to its width and height. It will shorten itself to fit the Flex container, but it will not elongate and absorb the extra free space in the Flex container to fit the Flex container. Equivalent to setting the property to” Flex: 0 1 auto”.

The auto element will size itself according to its width and height, but will stretch and absorb the extra free space in the Flex container, and will shorten itself to fit the Flex container. This is equivalent to setting the property to” Flex: 1 1 Auto “.

The None element is sized according to its width and height. It is completely inelastic: it neither shortens nor elongates to fit the Flex container. Equivalent to setting the property to” Flex: 0 0 auto”.

<‘flex-grow’> defines flex-grow for a Flex project. Negative values are invalid. The default value is 1 when omitted. (Initial value is 0)

<‘flex-shrink’> defines flex-shrink for flex elements. Negative values are invalid. The default value is 1 when omitted. (Initial value 1)

<‘flex-basis’> defines the Flex-basis attribute of a Flex element. If the value is 0, units must be added so as not to be considered scalable. The default value is 0 when omitted. (The initial value is auto)

Reference:

  • Flex: What exactly does 1 stand for?
  • MDN