Flex布局成员卡片：如何让文本置于用户名下方而非图片下方？

我正在尝试调整成员卡片中第二个文本元素（代词与职位区域）的位置，但始终无法实现预期效果。当前布局下，该文本完全位于头像图片下方，而我期望它能置于用户名的下方、图片的右侧。以下是当前的代码实现：

当前CSS代码 #

.crew-member-card {
  width: 400px;
  background-color: #292929;
  padding-top: 15px;
  border-radius: 8px;
  margin: 10px;
  margin-top: 0;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.name-and-profile-picture {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.pfp {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.userNames {
  font-size: 30px;
  font-weight: 900;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.pronouns-position {
  color: #c7c7c7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pronouns-position>* {
  margin-right: 5px;
}

当前HTML代码 #

<div class="crew-member-card">
  <div class="name-and-profile-picture">
    <p><img :src="getProfilePicture(user)" class="pfp"></p>
    <h3 class="userNames">{{ user.FirstName }} {{ user.LastName }}</h3>
    <div class="pronouns-position">
      <p class="pronouns" v-if="user.memberInfo.pronouns != 'Unset'">
        <font-awesome-icon icon="fa-solid fa-user" /> {{ user.memberInfo.pronouns.toLowerCase() }}</p>
      <p class="division-dot" v-if="user.memberInfo.pronouns != 'Unset'"> • </p>
      <p class="position">{{ user.memberInfo.position.toLowerCase() }}</p>
    </div>
  </div>
</div>

解决方案 #

核心问题在于当前的平级flex布局导致元素容易换行，只需调整HTML结构并优化CSS规则就能实现目标效果：

修改后的HTML代码 #

<div class="crew-member-card">
  <div class="name-and-profile-picture">
    <p><img :src="getProfilePicture(user)" class="pfp"></p>
    <!-- 新增容器包裹用户名和代词职位，让它们垂直排列 -->
    <div class="user-details">
      <h3 class="userNames">{{ user.FirstName }} {{ user.LastName }}</h3>
      <div class="pronouns-position">
        <p class="pronouns" v-if="user.memberInfo.pronouns != 'Unset'">
          <font-awesome-icon icon="fa-solid fa-user" /> {{ user.memberInfo.pronouns.toLowerCase() }}</p>
        <p class="division-dot" v-if="user.memberInfo.pronouns != 'Unset'"> • </p>
        <p class="position">{{ user.memberInfo.position.toLowerCase() }}</p>
      </div>
    </div>
  </div>
</div>

修改后的CSS代码 #

.crew-member-card {
  width: 400px;
  background-color: #292929;
  padding-top: 15px;
  border-radius: 8px;
  margin: 10px;
  margin-top: 0;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.name-and-profile-picture {
  display: flex;
  align-items: center;
  /* 去掉flex-wrap避免元素换行 */
  /* flex-wrap: wrap; */
  gap: 15px; /* 用gap精准控制头像和用户详情的间距 */
}

/* 新增用户详情容器，设置垂直排列 */
.user-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 可选：改为center可让内容居中 */
}

.pfp {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.userNames {
  font-size: 30px;
  font-weight: 900;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  margin: 0 0 8px 0; /* 给用户名加底部间距，区分职位区域 */
}

.pronouns-position {
  color: #c7c7c7;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 跟随父容器对齐方式 */
  position: relative;
}

.pronouns-position>* {
  margin-right: 5px;
  margin: 0; /* 移除p标签默认margin，避免间距混乱 */
}

关键修改点 #

• HTML结构：新增.user-details容器，将用户名和代词职位区域包裹为一组，确保它们垂直堆叠。
• CSS布局：
  • 移除.name-and-profile-picture的flex-wrap: wrap，防止元素换行到头像下方。
  • 用gap替代justify-content: space-evenly，更精准控制头像与用户详情的间距。
  • 设置.user-details为垂直flex布局，让用户名和职位自然上下排列。
  • 调整元素margin，优化内部间距，避免默认样式干扰布局。

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