Flex布局下可变数量div底部双元素边框对齐问题求助

• 当前使用flex布局但未给.card元素设置明确的列宽，元素宽度随内容自适应，导致不同行的同列元素位置不统一，边框自然无法对齐。
• 缺少全局box-sizing: border-box配置，边框和内边距会额外撑大元素盒模型宽度，进一步加剧错位问题。

仅需要修改CSS代码即可解决问题，调整思路如下：

1. 新增全局盒模型配置，保证边框、内边距不会撑大元素设定的宽度
2. 给不同断点下的.card设置对应列宽，1200px以上每行3个对应宽度33.3333%，992px-1200px每行2个对应宽度50%
3. 优化边框选择器写法，逻辑和原有规则一致但可读性更强，且自动适配任意总数量的场景，最后一行剩2个时也会自动给第二个元素加左边框，和上一行边框对齐

/* 新增全局盒模型配置 */
* {
  box-sizing: border-box;
}
.container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.card {
  border-radius: 0%;
  border: 0px;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 15px;
  padding-right: 15px;
  float: none;
  /* 去掉原有width:auto和margin:0 auto，新增flex属性防止内容挤压 */
  flex-shrink: 0;
  overflow: hidden;
  text-align: center;
}

@media screen and (min-width: 1200px) {
  .card {
    width: 33.3333%;
  }
  /* 排除每行第一个元素，其余都加左边框，适配任意数量 */
  .card:not(:nth-child(3n - 2)) {
    border-left: 1px solid black;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .card {
    width: 50%;
  }
  /* 排除每行第一个元素，其余都加左边框 */
  .card:not(:nth-child(2n - 1)) {
    border-left: 1px solid black;
  }
}

.card_components {
  background-color: red;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 329px;
}

调整后不管总共有多少个卡片，最后一行剩1个、2个还是3个，边框都会和上面行的位置完全对齐。

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