如何实现所有卡片尺寸统一并在一行内对齐？

核心问题分析 #

• 容器重复设置display属性：在min-width:576px的媒体查询里，.cards-container同时写了display: flex和display: inline-block，后者覆盖前者导致Flex布局失效，这是卡片混乱的根本原因。
• 缺少Flex容器必要属性：未添加flex-wrap: wrap，卡片宽度超出容器时无法正常换行。
• 响应式下宽度冲突：.card默认设置的width:90%会和Flex布局的flex-basis属性冲突，导致宽度计算异常。

修正后的完整CSS代码 #

.card {
  width: 90%;
  margin: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  border: solid 2px #fcad02;
  border-radius: 10px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(217, 218, 182, 0.2);
}

.card a {
  color: white;
  font-size: 1.2rem;
  text-decoration: none;
  background-color: #1c36fc;
  padding: 0.5rem;
  border-radius: 7px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

/* 576px断点下每行显示2张卡片 */
@media (min-width: 576px) {
  .cards-container {
    display: flex; /* 移除重复的inline-block设置，保留Flex布局 */
    flex-wrap: wrap; /* 添加换行属性，防止卡片挤压 */
    justify-content: space-around;
    width: 100%; /* 确保容器占满父级宽度 */
  }

  .card {
    width: auto; /* 重置width，让flex-basis控制卡片宽度 */
    flex-basis: calc(50% - 2rem); /* 匹配默认margin总和，避免超出容器 */
  }
}

/* 992px断点下每行显示4张卡片 */
@media (min-width: 992px) {
  .card {
    flex-basis: calc(25% - 2rem); /* 同步调整宽度计算 */
    padding-bottom: 1.5rem;
  }
}

.cardHeader {
  text-align: center;
}

关键修改说明 #

1. 清理重复样式：删掉.cards-container中的display: inline-block，让Flex布局正常生效。
2. 添加换行属性：flex-wrap: wrap保证卡片在容器宽度不足时自动换行，避免横向溢出。
3. 重置卡片宽度：响应式中将.card的width设为auto，消除与flex-basis的冲突。
4. 调整宽度计算：把calc(50% - 3rem)改为calc(50% - 2rem)，匹配卡片默认的左右margin总和，确保卡片不会超出容器范围。

原混乱布局参考 #

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