查漏补缺——说说flex-basis为百分数的情况

问题

如题所示

问题

相关源码：

.loader {
        box-sizing: border-box;
        display: flex;
        flex: 0 1 auto;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 25%;
        max-width: 25%;
        height: 200px;
        align-items: center;
        justify-content: center;
    }

CSS flex布局踩坑小记：flex-basis属性之0px与0%的差异

这里有有一行代码是这样的：

flex-basis: 25%;

根据上面的，flex-basis的样式值是百分数的时候，会根据子元素内容的百分比来计算实际的尺寸。