Flex布局下将末尾容器左对齐，其余容器居中的实现需求

要实现需求效果，只需调整wrapper的布局属性并添加一个伪元素，同时保留align-items: stretch：

• 将justify-content从space-evenly改为center，让完整行的容器居中显示
• 给wrapper添加::after伪元素并设置flex: auto，使其占据最后一行剩余空间，强制最后一行容器左对齐
• 该方案自动适配1个或2个容器的左对齐需求，且不会移除align-items: stretch导致多余空白

修改后的CSS代码 #

.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
    flex-direction: row;
    align-items: stretch;
    justify-content: center; /* 调整为center */
    width: 200px;
    height: 100px;
    resize: horizontal;
}

.wrapper::after {
    content: "";
    flex: auto; /* 占据最后一行剩余空间 */
}

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    align-content: space-between;
    flex: none;
    width: 50px;
    height: 50px;
    text-align: center;
    max-width: 100%;
    padding: 2px;
    border: 1px solid rgb(95 170 227 / 78%);
    background: rgb(0, 145, 255);
    color: white;
}

HTML代码（保持不变） #

<div class="wrapper">
    <div class="container">
        1
    </div>
    <div class="container">
        2
    </div>
    <div class="container">
        3
    </div>
    <div class="container">
        4
    </div>
    <div class="container">
        5
    </div>
</div>

内容的提问来源于stack exchange，提问作者Aso