查漏补缺——说说flex: 0 1 auto;

问题

如题所示

答案

相关源码：

.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;
    }

这里有一行样式：

flex: 0 1 auto;

flex 的 三个参数 flex:1 0 auto

flex属性是flex-grow、flex-shrink、flex-basic三个属性的缩写。

所以这里所对应的值是这样的：

flex-grow: 0;
flex-shrink: 1;
flex-basic: auto;

而这三个样式属性所对应的含义是这样的：

flex-grow所对应的含义是这个项目的放大比例，flex-shrink所对应的含义是这个项目的缩小比例，flex-basic所对应的含义是......，这个有点复杂，先放一放。

这三个综合起来的含义是不放大会缩小。