如何用CSS实现Flex布局满行居中、换行不满行左对齐？

需求：实现类似电商商品列表的网格布局，每个元素固定宽高，元素数量动态变化，适配移动端与桌面端。要求满行元素居中，最后一行不满行时左对齐。

原代码中使用justify-content: center会导致所有行（包括最后一行）都居中，不符合需求；而设置justify-content: left则所有元素左对齐，也不满足要求。

方案一：使用Grid布局（推荐，更简洁） #

Grid天生适配这类网格场景，只需修改容器的CSS属性即可实现需求：

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
            .container {
                display: grid;
                /* 自动适配容器宽度，生成固定15rem宽度的列 */
                grid-template-columns: repeat(auto-fit, 15rem);
                /* 整个网格容器居中，满行时元素自然居中 */
                justify-content: center;
                gap: 1rem;
                background-color: #ffaa00;
                margin-left: auto;
                margin-right: auto;
                width: 90%;
            }
            
            .item {
                width: 15rem;
                height: 15rem;
                background-color: #0088ff;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </body>
</html>

原理说明： #

• grid-template-columns: repeat(auto-fit, 15rem)：自动根据容器宽度生成尽可能多的15rem宽度的列，适配不同屏幕尺寸。
• justify-content: center：让整个网格在容器内居中，满行时所有元素自然居中；最后一行不满行时，元素会在各自的网格轨道内左对齐排列，同时整个网格仍保持居中。

方案二：使用Flex布局（通过伪元素实现） #

如果坚持使用Flex，可以给容器添加伪元素填充剩余空间，把最后一行的元素挤到左侧：

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
            .container {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 1rem;
                background-color: #ffaa00;
                margin-left: auto;
                margin-right: auto;
                width: 90%;
                /* 防止伪元素撑开容器高度 */
                overflow: hidden;
            }
            
            .item {
                width: 15rem;
                height: 15rem;
                background-color: #0088ff;
            }

            /* 添加伪元素填充剩余空间 */
            .container::after {
                content: "";
                flex: 9999;
                min-width: 15rem;
                height: 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </body>
</html>

原理说明： #

• 伪元素设置flex:9999和min-width:15rem，当最后一行不满时，伪元素会占据剩余所有可用空间，将最后一行的item挤到左侧；当行元素满时，伪元素会被挤到下一行，但因为height:0且容器overflow:hidden，不会影响布局。

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