移动端页面首张卡片消失问题：能否用flex-wrap解决？

可以通过flex-wrap解决这个问题，同时需要调整其他属性适配移动端，具体步骤如下：

1. 给.container添加flex-wrap: wrap
   原.container采用flex布局但未设置换行规则，移动端屏幕宽度不足时，flex子项会被强制挤压在同一行，甚至溢出容器可视区域，导致首张卡片被推到视野外。添加flex-wrap: wrap后，卡片会在宽度不足时自动换行，避免溢出。

2. 修改卡片宽度，实现自适应
   原卡片固定宽度500px远大于移动端屏幕宽度，导致无法完整显示。建议使用flex属性设置自适应宽度，同时限制最大宽度确保在大屏上的表现：

   .card {
     background: white;
     /* 替换固定宽度，设置基础宽度300px，可缩小不放大，最大宽度占满容器 */
     flex: 0 1 300px;
     max-width: 100%;
     height: 600px;
     margin: 10px;
     border-radius: 15px;
     text-align: center;
     /* 移除display: inline-block，flex子项无需此属性 */
   }
   

3. 优化容器布局逻辑
   原.reja容器设置了justify-content: center，卡片换行后可能出现不必要的居中间距，可移除该属性让内容自然排列：

   .reja {
     max-width: 100%;
     height: 700px;
     border: 1px solid #c3c3c3;
     display: flex;
     /* 移除justify-content: center */
     overflow: auto;
   }
   

4. 修复其他细节问题

   • .boat1和.boat2的background-image中url与括号间有空格，会导致图片加载失败，需去掉空格；
   • .card:hover中的过渡语法错误，修正为transition: all ease 0.3s;（指定合理过渡时间）。

修复后完整CSS代码 #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background: rgb(27, 27, 27);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* 添加换行 */
}

.card {
  background: white;
  flex: 0 1 300px; /* 自适应宽度 */
  max-width: 100%;
  height: 600px;
  margin: 10px;
  border-radius: 15px;
  text-align: center;
}

.card:hover {
  background-color: black;
  color: white;
  cursor: pointer;
  transform: scale(1.03);
  transition: all ease 0.3s; /* 修正过渡语法 */
}

.card-image {
  background-color: aqua;
  height: 150px;
  margin-bottom: 15px;
  background-size: cover;
}

.boat1 {
  background-image: url('../img/FreeWilly/FreeWi3mini.jpg'); /* 修复空格问题 */
}

.boat2 {
  background-image: url('./img/Xu/X4Mini.jpg'); /* 修复路径空格 */
}

.boat3 {
  background-image: url('../img/xalana.jpeg');
}

.boat4 {
  background-image: url('../img/Victorymini.jpg');
}

.card a {
  background-color: black;
  color: white;
  padding: 15px 20px;
  display: block;
  text-align: center;
  margin: 20px 50px;
}

.reja {
  max-width: 100%;
  height: 700px;
  border: 1px solid #c3c3c3;
  display: flex;
  overflow: auto;
}

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