Flex布局两行卡片对齐问题：含margin与25%宽度的适配

这个问题我太熟了，就是Flex布局里margin干扰宽度计算导致对齐失效的典型场景，给你几个实用的解决办法：

方法一：用calc()精准计算flex-basis #

你的问题核心是margin会额外占用空间，直接设flex:0 0 25%的话，卡片实际占用的宽度是25% + 左右margin（20px），导致第二行3个卡片总宽度超标，对齐不上。

我们可以用calc()把margin的宽度从flex-basis里扣除，让卡片的实际占位刚好匹配第一行的位置：

/* 第二行卡片的样式 */
.second-row-card {
  flex: 0 0 calc(25% - 20px); /* 25%减去左右margin的总和（10px*2） */
  margin: 0 10px;
}
/* 给第二行第一个卡片加负margin，和第一行保持一致的左侧对齐 */
.second-row-wrapper:first-child {
  margin-left: -10px;
}

计算后，每个卡片的flex-basis加上margin刚好等于25%，和第一行卡片的占位完全对齐。

方法二：改用Flex的gap属性替代margin（更推荐） #

其实Flex原生就有处理间距的属性——gap，它是直接在容器上设置的，不会影响子元素的宽度计算，用起来更省心：

首先修改容器样式：

.section-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 替代卡片的左右margin，值等于原来的左右margin总和 */
  margin: 0 -10px; /* 抵消gap在容器两侧的空白，和你原来的margin-left:-10px效果一致 */
}

然后修改卡片样式，去掉原有的margin：

.sessions-card, .earnings-card {
  flex: 0 0 25%;
  border: 2px solid black;
  height: 200px;
  /* 移除原来的margin: 0 10px; */
}

这样不管是第一行4个还是第二行3个卡片，都会自动按照25%的宽度加上gap间距排列，完全不用纠结margin的干扰，对齐问题直接解决。

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