如何通过CSS实现小屏移动端项目卡片div垂直堆叠排列

项目展示页包含2个项目卡片，在手机等小尺寸屏幕下访问时布局显示异常，期望实现小屏下两个卡片上下垂直堆叠排列。
异常效果如下：

现有代码仅给卡片设置了固定宽度calc(33% - 20px)，未给卡片父容器配置响应式布局规则，小屏尺寸下宽度计算逻辑失效，最终导致排版错乱。

通过Flex布局搭配CSS媒体查询即可实现响应式适配，直接在原有CSS代码末尾追加以下样式即可：

/* 卡片父容器配置Flex布局，大屏下自动横向排列 */
.services .serv-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* 屏幕宽度小于768px（手机端通用断点）时的样式 */
@media (max-width: 768px) {
  .services .serv-content .card {
    width: 100%; /* 卡片占满整行宽度，自动实现垂直堆叠 */
  }
}

可选优化 #

• 你当前页面只有2张卡片，大屏下原来的calc(33% - 20px)宽度会留出三分之一的空白，可以把原有卡片宽度样式调整为calc(50% - 10px)，让两个卡片在大屏下平分容器宽度，视觉效果更协调。
• 如果需要适配平板等中等尺寸屏幕，只需要调整媒体查询的max-width阈值即可，比如需要在宽度小于1024px时就切换为堆叠布局，把768px替换为1024px就行。

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