如何让Flex行内相邻元素上下排列？适配War卡牌游戏响应式布局

我正在学习响应式设计，目前开发一款模拟卡牌游戏《War》的程序。希望两名玩家的分数<h3>标签位于玩家名<h2>标签下方，当前移动端显示符合预期，但平板及桌面端未达效果。我刚接触相关技术，以下是我的代码：

body {
  background-color: #00512c;
}

.playing-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height: 95vh;
}

.card {
  width: 200px;
  margin: 10px;
  border: 3px solid #333;
  background-color: white;
  border-radius: 5%;
  min-height: 300px;
  position: relative;
}

.playing-card {
  position: absolute;
  width: 200px;
  min-height: 300px;
}

.player {
  font-family: "poppins", sans-serif;
  color: white;
  font-weight: 400;
}

.score {
  font-family: "popins", sans-serif;
  color: white;
  font-weight: 400;
}

.btn {
  background-color: #da1212;
  border-radius: 25%;
  font-size: 25px;
  cursor: pointer;
  font-family: "poppins", sans-serif;
  font-weight: 400;
  color: white;
}

.btn:active {
  background-color: #b22727;
}

@media only screen and (max-width: 549px) {
  .card {
    min-height: 200px;
    width: 150px;
  }

  .playing-card {
    min-height: 200px;
    width: 150px;
  }

  .playing-field {
    display: flex;
    flex-direction: column;
  } 
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
    <title>War</title>
  </head>
  <body>
    <div class="playing-field">
      <h2 class="player">Player 1</h2>
      <h3 class="score score-1">Score: 0</h3>
      <div class="card card-0">
        <img class="playing-card" src="PNG-cards-1.3/10_of_clubs.png" alt="" />
      </div>
      <button class="btn">Draw</button>

      <div class="card card-1">
        <img
          class="playing-card"
          src="PNG-cards-1.3/10_of_diamonds.png"
          alt=""
        />
      </div>
      <h2 class="player">Player 2</h2>
      <h3 class="score score-2">Score: 0</h3>
    </div>
  </body>
</html>

问题原因 #

桌面/平板端的.playing-field使用flex布局时，玩家名、分数、卡牌、按钮都是独立的flex子元素，会被横向分散排列，导致分数无法和玩家名垂直对齐。

修复方案 #

1. 调整HTML结构

将每个玩家的<h2>和<h3>包裹在同一个容器内，让它们成为一个整体参与flex布局：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
    <title>War</title>
  </head>
  <body>
    <div class="playing-field">
      <div class="player-info">
        <h2 class="player">Player 1</h2>
        <h3 class="score score-1">Score: 0</h3>
      </div>
      <div class="card card-0">
        <img class="playing-card" src="PNG-cards-1.3/10_of_clubs.png" alt="" />
      </div>
      <button class="btn">Draw</button>

      <div class="card card-1">
        <img
          class="playing-card"
          src="PNG-cards-1.3/10_of_diamonds.png"
          alt=""
        />
      </div>
      <div class="player-info">
        <h2 class="player">Player 2</h2>
        <h3 class="score score-2">Score: 0</h3>
      </div>
    </div>
  </body>
</html>

2. 补充CSS样式

给新的.player-info容器设置垂直布局，同时修正字体拼写错误、优化间距：

body {
  background-color: #00512c;
}

.playing-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height: 95vh;
}

/* 新增玩家信息容器样式，确保内部元素垂直排列 */
.player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card {
  width: 200px;
  margin: 10px;
  border: 3px solid #333;
  background-color: white;
  border-radius: 5%;
  min-height: 300px;
  position: relative;
}

.playing-card {
  position: absolute;
  width: 200px;
  min-height: 300px;
}

.player {
  font-family: "poppins", sans-serif;
  color: white;
  font-weight: 400;
  margin: 0 0 5px 0; /* 优化上下间距 */
}

.score {
  font-family: "poppins", sans-serif; /* 修正原拼写错误"popins" */
  color: white;
  font-weight: 400;
  margin: 0;
}

.btn {
  background-color: #da1212;
  border-radius: 25%;
  font-size: 25px;
  cursor: pointer;
  font-family: "poppins", sans-serif;
  font-weight: 400;
  color: white;
}

.btn:active {
  background-color: #b22727;
}

@media only screen and (max-width: 549px) {
  .card {
    min-height: 200px;
    width: 150px;
  }

  .playing-card {
    min-height: 200px;
    width: 150px;
  }

  .playing-field {
    flex-direction: column;
  } 
}

额外说明 #

• 移动端的flex-direction: column可以保留，.player-info的垂直布局会让玩家信息在移动端依然保持正确排列
• 修正字体拼写错误后，能确保Poppins字体正常加载显示

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