I’m here to thank Zan
If there are any mistakes in the following personal tests, please correct them:
First, let’s be clear,flexyesflex-grow、flex-shrink、flex-basisAbbreviation for. Therefore, the following conditions can be considered for its value:
flexThe default value of is a combination of the above three property values. Assuming that the above three attributes also take default values, thenflexThe default value of is 0 1 auto. Similarly, the following are equivalent:

.item {flex: 2333 3222 234px;}
.item {
    flex-grow: 2333;
    flex-shrink: 3222;
    flex-basis: 234px;
}

WhenflexThe value isnone, then the calculated value is 0.00 auto, which is equivalent as follows:

.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

WhenflexThe value isautoThen the calculated value is 1 1 auto, which is equivalent as follows:

.item {flex: auto;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

WhenflexIf the value is a non negative number, the number isflex-growValue,flex-shrinkTake 1,flex-basisTake 0% as follows:

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

WhenflexIf the value is a length or percentage, it is regarded asflex-basisValue,flex-growTake 1,flex-shrinkTake 1 as follows (note that 0% is a percentage rather than a non negative number)

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

WhenflexIf the values are two non negative numbers, they are regarded asflex-growandflex-shrinkValue of,flex-basisTake 0% as follows:

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

WhenflexValues are a non negative number and a length or percentage, respectivelyflex-growandflex-basisValue of,flex-shrinkTake 1 as follows:

.item {flex: 2333 3222px;}
.item {
    flex-grow: 2333;
    flex-shrink: 1;
    flex-basis: 3222px;
}

flex-basisIt specifies the base value of the child element. Therefore, the calculation of overflow is closely related to this property.flex-basisThe scope of the regulation depends onbox-sizing。 Here we mainly discuss the followingflex-basisThe value of:

• auto: first retrieve the major dimension of the child element, if it is notauto, then use the value to take the value of the main dimension; if it is alsoauto, the value is usedcontent。
• content: refers to the automatic layout according to the content of the child element. Some user agents do not implement fetchingcontentThe equivalent alternative isflex-basisAnd the main sizeauto。
• Percentage: calculated based on the main size of its containing block (i.e., the telescopic parent container). If the primary size of the containing block is undefined (that is, the primary size of the parent container depends on the child elements), the calculation result and are set toautoThe same.

Take a difference between different values:

<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>

<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        width: 140px;
        flex: 2 1 0%;
        background: blue;
    }
    .item-2 {
        width: 100px;
        flex: 2 1 auto;
        background: darkblue;
    }
    .item-3 {
        flex: 1 1 200px;
        background: lightblue;
    }
</style>

• The total size of the parent vessel on the spindle is 600px
• The total reference value of sub elements is: 0% + auto + 200px = 300px, where

  -0% means 0 width
  -Auto corresponding to the main size is 100px

• So the remaining space is 600px – 300px = 300px
• The sum of expansion and expansion coefficients is: 2 + 2 + 1 = 5
• The remaining space is allocated as follows:

  -Item-1 and item-2 were assigned 2 / 5 respectively, and each got 120px
  -1 / 5 of item-3 is assigned to get 60px

• The final width of each project is:

  - item-1 = 0% + 120px = 120px
  - item-2 = auto + 120px = 220px
  - item-3 = 200px + 60px = 260px

• When the reference value of item-1 is 0%, the item is regarded as zero size. Therefore, it is useless to declare its size as 140px
• The reference value of item-2 isautoAccording to the rule, the reference value is the main dimension value, i.e. 100px, so the 100px will not be included in the remaining space

For more information, please refer to:
http://www.w3.org/html/ig/zh/css-flex-1/

.x{
  flex:1 1 auto;
}

After autoprefix

.x{
  -webkit-box-flex:1;
  -webkit-flex:1 1 auto;
      -ms-flex:1 1 auto;
          flex:1 1 auto;
}

So the old syntax doesn’t support auto, right? So what if you want to initially layout with the width of child elements and recalculate according to the remaining or overflow space? @HaoyCn