React项目数组映射元素CSS移动端样式不统一问题求助

从你的代码和描述来看，移动端视图中映射生成的饮品卡片样式错位，核心原因是flex布局下元素高度不一致、内容对齐规则不统一，导致不同内容长度的卡片出现布局偏移。下面是具体的排查和修复方案：

1. 统一卡片容器的高度与对齐规则 #

你的DrinksCard用了flex-direction: row，但没有强制固定高度，当卡片内文字内容长度不同时，会导致卡片高度和元素对齐错位。修改DrinksCard的CSS：

.DrinksCard{
  flex-direction: row;
  font-family: 'Open Sans', sans-serif;
  justify-content: space-around;
  align-items: center;
  /* 添加以下属性 */
  min-height: 120px; /* 固定最小高度，确保所有卡片高度统一 */
  width: 100%; /* 强制卡片占满容器宽度 */
  padding: 10px 0; /* 统一内边距，避免内容贴边 */
  border-bottom: 1px solid #eee; /* 可选：添加分隔线，增强视觉统一感 */
}

2. 固定图片容器与图片的尺寸 #

当前ImageContainer用了max-width: 30%，在不同屏幕宽度下会导致容器大小波动，加上图片的width:100px和height:100px可能被容器限制，导致图片显示不一致。修改为固定尺寸：

.ImageContainer{
  /* 替换原有max-width设置 */
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}
.DrinksContainer img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* 确保图片按比例缩放，不会变形 */
}

3. 统一文字区域的布局与溢出处理 #

DrinkHeader中的文字（饮品名称、详情）长度不同时，会导致区域高度变化。添加文字溢出控制和统一对齐：

.DrinkHeader{
  max-width: 60%;
  /* 添加以下属性 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%; /* 让文字区域占满卡片高度，垂直居中 */
}
.DrinkHeader h1{
  font-size: 1rem;
  margin: 0 0 5px 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 可选：强制名称单行显示，避免高度变化 */
}
.DrinkHeader p{
  font-size: 0.8rem;
  margin: 0;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 可选：强制详情单行显示 */
}

4. 统一按钮的样式与尺寸 #

当前按钮内容不同（"Add more" vs "from ₦xxx"）可能导致按钮高度或宽度不一致，强制按钮的尺寸和内部对齐：

.DrinkFooter button{
  padding: 5px;
  height: 30px;
  border-radius: 10px;
  margin-left: 0;
  width: 90px;
  /* 添加以下属性 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  border: none;
  background-color: #ff6b35; /* 替换为你需要的按钮背景色 */
  color: #fff; /* 统一文字颜色 */
}
/* 确保按钮内的span不会破坏布局 */
.DrinkFooter button span{
  display: block;
  text-align: center;
}

5. 修正容器的flex布局 #

当前DrinksContainer是flex-direction: column，但没有设置align-items，确保卡片在容器内对齐：

.DrinksContainer{
  display: flex;
  flex-direction: column;
  gap: 10px; /* 添加间距，让卡片之间更清晰 */
  align-items: center; /* 让卡片居中对齐 */
  width: 100%;
}

这些修改会强制所有映射生成的卡片保持统一的尺寸、对齐方式，即使内容长度不同，也不会出现错位问题。你可以根据实际视觉需求调整具体的数值（比如min-height、字体大小等）。

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