如何将Flex子元素高度设为50%，实现UI对齐且不重叠封面图

我想要实现的UI布局如下：

当前的实现效果：

我的实现步骤：

• 顶部设置一个作为封面图的div；
• 下方是包含两个子div的flex容器，结构如下：

<div>Image Cover photos</div>
<div style="display : flex;">
  <div>profile photo</div>
  <div>UI Details Card</div>
</div>

• 给头像div添加transform : translateY(-50%)属性，使其一半部分覆盖在封面图上；
• 现在遇到的问题：UI详情卡片位置符合预期，但基线发生变化。希望将其高度设为50%，使其与头像基线对齐，同时避免UI详情卡片的文本像头像一样重叠封面图，该如何实现？

推荐三种实用的调整方式，解决基线对齐和文本不重叠的问题：

方法1：给flex容器设置底部对齐 #

把flex容器的对齐方式改成align-items: flex-end，让头像和详情卡片的底部基线对齐，再给详情卡片加顶部内边距，把文本从封面图重叠区域移开：

<div>Image Cover photos</div>
<div style="display : flex; align-items: flex-end;">
  <div style="transform: translateY(-50%);">profile photo</div>
  <div style="padding-top: 25%;">UI Details Card</div>
</div>

这里的25%是根据头像上移比例调整的，你可以根据实际尺寸微调数值。

方法2：用相对定位替代transform #

给头像div设置position: relative; top: -50%，同时给flex容器设置负的margin-top（数值为头像高度的一半），再给详情卡片设置最小高度和顶部内边距固定位置：

<div>Image Cover photos</div>
<div style="display : flex; margin-top: -25%;">
  <div style="position: relative; top: -50%;">profile photo</div>
  <div style="min-height: 50%; padding-top: 1rem;">UI Details Card</div>
</div>

这种方式更可控，不会干扰flex的基线对齐逻辑。

方法3：单独给详情卡片设置底部对齐 #

如果不想修改整个flex容器的对齐方式，单独给详情卡片设置align-self: flex-end，再用顶部内边距把文本往下推：

<div>Image Cover photos</div>
<div style="display : flex;">
  <div style="transform: translateY(-50%);">profile photo</div>
  <div style="align-self: flex-end; padding-top: 25%;">UI Details Card</div>
</div>

核心逻辑是：先让两个元素的底部基线对齐，再通过内边距把详情卡片的文本从封面图重叠区域移走，保证内容不被遮挡。

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