简单的介绍一下flex:1

最近我在使用tailwindcss重新构建自己的博客，在用到flex布局的时候，我看到tailwindcss中有：

Class	Properties
flex-1	flex: 1 1 0%
flex-auto	flex: 1 1 auto
flex-inital	flex: 0 1 auto
flex-none	flex: none

看到这些我有点疑惑，到底我该用哪一个，这些class到底有啥区别。

其实，理解起来很简单，首先你得知道当你用到flex: ~时，它包含了三个属性flex-grow、flex-shrink、flex-basis，按照翻译来看依次是增长、收缩、基础。

flex-basis

我们先讲这个属性，flex-basis你可以理解为width属性，或者在flex-direction: column情况下的height属性，但是flex-basis有更高的优先级。当flex-basis: auto时，可以理解为width为父容器的宽度。

flex-grow

这个属性决定容器剩余空间的分配方式，就拿🌰来说，三个子容器的总宽度为90px * 3 = 270px，父容器宽度为300px，那么剩余空间就是30px，三个子容器flex-grow都是1，那么按照1:1:1的分配规则，那么每个子容器都得增加10px，也就是每个子容器的宽度变成了100px。

.parent {
    width: 300px;
    display: flex;
}
.child {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 90px;
}

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>

flex-shrink

这个属性决定容器超出空间的分配方式，还拿🌰来说，三个子容器的总宽度为110px * 3 = 330px，父容器宽度为300px，那么超出空间就是30px，三个子容器flex-shrink都是1，那么按照1:1:1的分配规则，那么每个子容器都得舍掉10px，也就是每个子容器的宽度又回到了100px。

.parent {
    width: 300px;
    display: flex;
}
.child {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 110px;
}

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>

flex: 1

.main {
    flex: 1;
    /*
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;
    */
}

综上所述，flex: 1的含义就很明显了，初始宽度为0%，如果父容器有多余的部分，该元素能够分到1份。