12.14 flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto

阮一峰felx教程中对flex-basis的定义

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex-basis属性的默认值是auto即项目占据的主轴空间就是自身占据主轴空间的大小；
设置项目的flex-basis，
当某个项目的flex-basis的值为10%就为主轴空间的10%（覆盖项目原本占据的主轴空间、flex-basis优先级高）；假设项目的flex-basis的10%为40px，项目原本的weight为50px，那么现在项目占据的主轴空间为40xp；
如果所有项目的flex-basis的值总和大于100%则按照每个项目的flex-basis比例进行分配主轴空间；
最后，如果项目具有margin值，margin值会存在，即margin值的那部分空间会占据，无论总flex-basis是10000%，margin值也不会被移除。

    <style>
        .father {
            display: flex;
            /* flex: 1; */
            height: 50px;
            /*  80px; */
            background-color: blue;
        }

        .son1 {
            flex-basis: 40%;
            height: 50px;
             50px;
            background-color: pink;
        }

        .son2 {
            flex-basis: 60%;
            height: 50px;
             50px;
            background-color: yellow;
        }

        .son3 {
            /* flex-basis: 100%; */
            height: 50px;
             50px;
            background-color: green;
        }


        .all {
            margin-right: 50px;
        }
    </style>
</head>

<body>
    <div class='father'>
        <span class="son1 all">3</span>
        <span class="son2 all">2</span>
        <span class="son3 all">1</span>
    </div>
</body>