Html Flexbox-4柱网轴线最后一项拉伸

我有一个简单的Flexbox布局，如下所示

.container{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.项目{
背景：水鸭；
弹性：1021%；利润率：10px；
}

项目1

这是一些测试内容

项目2

这是一些测试内容

项目3

这是一些测试内容

项目4

这是一些测试内容

项目5

这是一些测试内容

移除flex grow 1，否则它们将增长以填充行：

.container{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.项目{
背景：水鸭；
弹性基准：21%；/*只需设置基准，并将增长和收缩保留为默认值*/
利润率：10px；
}

项目1

这是一些测试内容

项目2

这是一些测试内容

项目3

这是一些测试内容

项目4

这是一些测试内容

项目5

这是一些测试内容

设置

flex:1 0 21%

本质上是指设置

flex-grow: 1;
flex-shrink: 0;
flex-basis: 21%;

---

通过这种方式，

21%

部分实际上是无用的，因为您已经将它设置为在它的行部分中可以扩展多少（

flex-grow:1

）。要修复它，只需将

flex basis

设置为任意百分比，而不设置其他百分比。直接定义

flex-basis:21%

我也有办法设置宽度，我不知道这是否是你想要的

.container{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.项目{
背景：水鸭；
利润率：10px；
宽度：21%；
}

项目1

这是一些测试内容

项目2

这是一些测试内容

项目3

这是一些测试内容

项目4

这是一些测试内容

项目5

这是一些测试内容