游戏页面如何实现游戏区块横向排列并自动换行？

你之前的尝试没成功主要是两个问题：一是display: inline-block只作用在父容器上，内部的游戏区块还是块级元素会占满整行；二是display: flexbox是错误的属性写法，正确的应该是display: flex。

下面是正确的实现步骤：

1. 修改父容器的CSS布局 #

给.games_content设置Flex布局，并开启自动换行，同时可以添加间距让布局更美观：

.games_content {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* 游戏区块之间的间距，可根据需求调整 */
  padding: 20px; /* 避免区块贴住容器边缘 */
  justify-content: flex-start; /* 靠左排列，可选center居中 */
}

2. 设置单个游戏区块的宽度 #

为了让区块在不同屏幕尺寸下能自适应换行，给每个游戏容器（比如.dream_blast、.angry_birds这类）设置合适的宽度规则，比如最小宽度250px，剩余空间自动分配：

.dream_blast, .angry_birds, .angrybirds_match, .angrybirds-friends, 
.angrybirds_evolution, .angrybirds_blast, .angrybirds_pop, .angrybirds_transform {
  flex: 1 1 250px; /* 1: 允许拉伸占满空间; 1: 允许收缩; 250px: 最小宽度 */
  max-width: 300px; /* 可选，限制区块最大宽度 */
}

3. 调整原有样式的小细节 #

原来的.games_content_fig_desc设置了固定宽度250px，现在可以改成width: 100%让它自适应区块宽度；同时调整按钮和图片的样式，让布局更协调：

.games_content_fig_desc {
  color: white !important;
  width: 100%; /* 改为100%自适应父容器 */
  margin-top: 15px;
}
.download_button {
  margin: 25px auto; /* 改为auto让按钮居中 */
  display: block; /* 按钮转为块级元素才能margin:auto居中 */
}
.games_image {
  width: 100%; /* 图片自适应区块宽度 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

完整修改后的CSS代码 #

.games_image:hover { cursor: pointer; transform: scale(1.1); }
#games { background-color: black; margin: 0; padding: 0; }
.games_content_fig_desc { color: white !important; width: 100%; margin-top: 15px; }
.games_content { 
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 20px;
  justify-content: flex-start;
}
.games_content_fig { margin-left: 0; color: #ffec00; text-align: center; }
.download_button:hover { transform: scale(1.1); }
.download_button { 
  background-color: #ff7171; 
  margin: 25px auto;
  border: none; 
  color: white; 
  padding: 15px 32px; 
  cursor: pointer; 
  text-align: center; 
  text-decoration: none; 
  border-radius: 5px; 
  font-size: 16px;
  display: block;
}
.games_image { 
  height: 200px; 
  width: 100%;
  margin: 25px 0; 
  border-radius: 50px;
  object-fit: cover;
}
/* 单个游戏容器样式 */
.dream_blast, .angry_birds, .angrybirds_match, .angrybirds-friends, 
.angrybirds_evolution, .angrybirds_blast, .angrybirds_pop, .angrybirds_transform {
  flex: 1 1 250px;
  max-width: 300px;
  text-align: center;
}

这样修改后，游戏区块就会横向排列，当一行的空间不足以容纳下一个区块时，会自动换行到下一行，同时在不同屏幕尺寸下也能有良好的自适应效果。

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