Angular项目中如何实现一行3个div、换行显示其余div的布局？

我需要实现一行显示3个带food-item类的div，下一行显示另外3个的布局。当前使用Angular的*ngFor指令循环生成这些卡片，外层容器为category-food，但尝试的CSS样式未达到预期效果。

现有HTML代码 #

<div class="category-food">
    <div class="food-item" *ngFor="let art of meals">
        <img class="card-img-top center" [src]="art.strMealThumb" style="max-width:300px;" role="button">
        <div>
            <h1 class="content-text">{{art.strMeal}}</h1>
        </div>
    </div>
</div>

尝试过的CSS样式 #

.category-food {
  display: flex;
}

.category-food .food-item {
  align-items: center;
  margin: 20px;
  width: 100%;
  border: 1px solid grey;
}

.card-img-top {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  border-radius: 6px;
}

.content-text {
  font-size: 24px !important;
  text-align: center;
}

解决方案 #

现有样式的问题在于：category-food仅设置了display: flex但未开启换行，且food-item的width: 100%会让每个卡片占满整行，无法实现一行3个的布局。修改后的CSS如下：

.category-food {
  display: flex;
  flex-wrap: wrap; /* 开启自动换行 */
  gap: 20px; /* 控制卡片间的间距，替代margin更便捷 */
  padding: 0 20px; /* 可选，避免边缘卡片贴容器边缘 */
}

.category-food .food-item {
  display: flex;
  flex-direction: column; /* 让图片和标题垂直排列 */
  align-items: center;
  flex: 1 1 calc(33.333% - 40px); /* 计算每行3个的宽度，减去左右gap的总和 */
  max-width: calc(33.333% - 40px); /* 限制最大宽度，防止拉伸变形 */
  margin: 20px 0; /* 仅保留上下间距 */
  border: 1px solid grey;
  padding: 10px; /* 可选，增加卡片内部间距 */
  box-sizing: border-box; /* 确保padding和border不影响宽度计算 */
}

.card-img-top {
  display: block;
  width: 80%; /* 调整图片占比，让卡片布局更协调 */
  border-radius: 6px;
}

.content-text {
  font-size: 24px;
  text-align: center;
  margin: 10px 0 0; /* 调整标题与图片的间距 */
}

关键调整说明 #

• flex-wrap: wrap：让flex容器在空间不足时自动换行，实现多行布局
• flex: 1 1 calc(33.333% - 40px)：33.333%对应每行3个的基础宽度，减去40px抵消gap的左右间距；flex-grow:1允许卡片在空间充足时填充剩余空间，flex-shrink:1允许空间不足时适当缩小
• box-sizing: border-box：确保元素的padding和border不会额外增加宽度，保证布局计算准确

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