如何实现Recipe Card容器居中且每行仅显示3个并自动换行？

我有若干食谱卡片，想要实现每行仅显示3个卡片，超出部分自动换行，同时让容器在页面中居中显示。以下是我的当前代码：

HTML代码 #

<div class="recipe-container">
    <div class="recipe-window">
        <a href="https://www.bbcgoodfood.com/recipes/easy-millionaires-shortbread" target="_blank">
            <img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/millionaires-shortbread-52587dd.jpg?quality=90&webp=true&resize=300,272">
        </a>
        <p class="recipe-title">Millionare's Shortbread</p>
    </div>
    <div class="recipe-window">
        <a href="https://www.bbcgoodfood.com/recipes/classic-white-loaf" target="_blank">
            <img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/recipe-image-legacy-id-559666_11-b53071d.jpg?quality=90&webp=true&resize=300,272">
        </a>
        <p class="recipe-title">Classic White Loaf</p>
    </div>
    <div class="recipe-window">
        <a href="https://www.bbcgoodfood.com/recipes/classic-white-loaf" target="_blank">
            <img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/recipe-image-legacy-id-1043451_11-4713959.jpg?quality=90&webp=true&resize=300,272">
        </a>
        <p class="recipe-title">Ultimate Chocolate Cake</p>
    </div>
</div>

现有CSS代码 #

.recipe-container {
    margin: 0px;
    padding: 10px;
    display: inline-flex;
}

.recipe-window {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    word-break: break-word;
    width: min-content;
}

.recipe-title {
    color: black;
    margin-top: 5px;
    padding: 0px;
    font-size: 25px;
}

只需要修改CSS部分的两个核心类，就能实现需求：

修改后的完整CSS代码 #

.recipe-container {
    margin: 0 auto; /* 让容器在页面水平居中 */
    padding: 10px;
    display: flex; /* 改用标准flex布局 */
    flex-wrap: wrap; /* 空间不足时自动换行 */
    justify-content: center; /* 每行卡片居中对齐 */
    max-width: 1200px; /* 可选：限制容器最大宽度，避免过宽 */
}

.recipe-window {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    word-break: break-word;
    flex: 0 0 calc(33.333% - 20px); /* 计算宽度：1/3容器宽度减去左右margin总和 */
    box-sizing: border-box; /* 确保padding和border不额外增加宽度 */
}

.recipe-title {
    color: black;
    margin-top: 5px;
    padding: 0px;
    font-size: 25px;
}

关键修改说明： #

• .recipe-container：

  • 替换inline-flex为flex，配合flex-wrap: wrap实现卡片自动换行
  • margin: 0 auto让容器自身在页面水平居中
  • justify-content: center保证每行的卡片居中排列，避免最后一行卡片左对齐的突兀感
  • max-width可选，防止容器在超大屏幕上拉得太宽，影响视觉效果

• .recipe-window：

  • 用flex: 0 0 calc(33.333% - 20px)替代width: min-content，自动计算每个卡片的宽度，刚好占容器1/3的宽度（减去左右各10px的margin），确保每行刚好3个卡片
  • 添加box-sizing: border-box，让padding和border不会额外增加卡片宽度，保证布局计算准确

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