如何通过CSS和HTML让绿色卡片适配红色区域并自动换行？

需要让溢出红色区域的绿色卡片适配该区域，剩余卡片自动换行并适配红色区域；曾尝试Grid布局，但卡片间距过大不够美观，希望保持蓝色容器内绿色卡片的紧凑排列效果。

修改.mini-card-container和.mini-card的CSS属性即可实现需求，同时保留紧凑排列的效果：

.mini-card-container{
    background-color: blue;
    display: flex;
    flex-wrap: wrap; /* 开启自动换行 */
    gap: 0.3rem; /* 精准控制卡片间距，替代margin避免布局偏差 */
}
.mini-card{
    background-color: #48bd9d;
    padding: 1rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: .2s ease-in-out;
    border: solid .15rem #21272f;
    flex: 1 0 calc(20% - 0.3rem); /* 默认每行5个卡片，超出自动换行 */
    min-width: 180px; /* 设置最小宽度，防止窗口过小时卡片挤压变形 */
    box-sizing: border-box; /* 让padding和border计入宽度，保证布局精准 */
}

关键修改说明 #

• flex-wrap: wrap：让溢出红色区域的卡片自动换行，不再横向溢出
• gap: 0.3rem：替代原卡片的margin，统一控制卡片间的间距，避免换行后左右边距不一致，保持紧凑感
• flex: 1 0 calc(20% - 0.3rem)：
  • flex-grow: 1：当行内有剩余空间时，卡片自动拉伸填满红色区域宽度
  • flex-shrink: 0：避免卡片被压缩变形
  • flex-basis：计算每行默认显示的卡片数量，减去gap宽度保证间距准确
• min-width: 180px：当窗口缩小到卡片宽度小于180px时，自动触发换行，保证内容可读性
• box-sizing: border-box：让padding和边框不会额外撑开卡片宽度，布局更精准

如果需要调整每行显示的卡片数量，只需修改flex-basis的百分比：

• 每行4个：calc(25% - 0.3rem)
• 每行3个：calc(33.33% - 0.3rem)
• 每行2个：calc(50% - 0.3rem)

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