如何调整CSS Flex布局实现每行固定4张卡片并居中对齐

要实现无论屏幕尺寸如何，每行始终显示4张卡片且居中对齐，只需调整Flex容器和卡片的CSS属性即可，具体修改如下：

1. 调整卡片容器样式 #

给承载卡片的父容器添加以下样式：

.products-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 实现每行卡片居中对齐 */
  gap: 1rem; /* 设置卡片之间的间距，可根据需求调整数值 */
}

2. 固定卡片宽度并禁止收缩 #

给单个卡片设置以下样式，确保每行刚好容纳4个：

.product-card {
  flex-basis: calc(25% - 0.75rem); /* 计算卡片宽度：25%占满一行，减去间距分摊值（3个间距/4张卡片=0.75rem） */
  flex-shrink: 0; /* 关键属性：禁止卡片在空间不足时缩小，保证每行始终4张 */
  box-sizing: border-box; /* 确保padding、border不会额外增加卡片宽度 */
}

补充说明 #

• 如果不习惯用gap，改用margin控制间距，可将卡片样式改为：

  .product-card {
    flex-basis: 25%;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 0 0.375rem 1rem; /* 左右margin平分间距，上下margin控制行间距 */
  }
  

• 若极窄屏幕下卡片内容溢出，可根据需求给卡片添加min-width（比如min-width: 200px），但这会打破"每行4张"的规则，需根据实际场景权衡。

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