CSS Flexbox：优先拉伸首个弹性项而非末尾项的实现方法

问题背景 #

当前Flexbox布局中，最后一行的弹性项会被拉伸，对应的CSS代码如下：

.container {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
}

.item {
    flex-grow: 1;
    flex-shrink: 0;
    display: inline-block;

    position: relative; width: 14em; height: 14em; min-width: 14em;
}

需求：在row流布局下，仅通过CSS实现优先拉伸首个弹性项，而非末尾项。

解决方案 #

可以通过调整flex-grow的分配规则实现，具体代码修改如下：

.container {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
}

.item {
    flex-grow: 0; /* 禁止所有项默认拉伸 */
    flex-shrink: 0;
    position: relative; 
    width: 14em; 
    height: 14em; 
    min-width: 14em;
}

/* 仅让第一个弹性项占据剩余空间 */
.item:first-child {
    flex-grow: 1;
}

原理说明 #

1. 原布局中所有项设置了flex-grow:1，导致容器剩余空间会被所有行的项平分，包括最后一行不满的项，因此出现末尾项拉伸的情况。
2. 将默认的flex-grow设为0，确保除第一个项外，其他所有项（包括最后一行的）都保持固定宽度14em，不会自动拉伸。
3. 给第一个项单独设置flex-grow:1，让它独占容器中除其他项总宽度之外的所有剩余空间，实现优先拉伸首个项的效果。

内容的提问来源于stack exchange，提问作者Phil S.