布局尽量避免使用 float，改用 flex 布局，这里是 布局时 不同个数的具体意义详情

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

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

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

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;

flex 属性可以指定1个，2个或3个值。

  1. 单值语法: 值必须为以下其中之一:
    一个无单位数(<number>): 它会被当作<flex-grow>的值。
    一个有效的宽度(width)值: 它会被当作\ 的值。
    关键字none，auto或initial.

  2. 双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

    一个无单位数：它会被当作 <flex-shrink> 的值。
    一个有效的宽度值: 它会被当作 <flex-basis> 的值。

  3. 三值语法:

    第一个值必须为一个无单位数，并且它会被当作\ 的值。
    第二个值必须为一个无单位数，并且它会被当作 \ 的值。
    第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。