如何用Flexbox实现响应式「关于我」板块，防止元素错位

你的代码核心问题是滥用绝对定位，把图片、标题都强行拉出了Flex布局流，Flexbox完全没法控制这些元素的位置，再加上硬编码的固定位置值（比如top: 600px、padding-left: 50%），必然导致不同屏幕下元素错位。下面是修复后的完整代码，同时实现桌面端并排、移动端垂直堆叠的响应式效果：

修改后的HTML（补全闭合标签，优化结构） #

<section>
    <div class="aboutme-content">
        <img src="/img/sebandme.jpg" alt="Profile Photo" class="aboutme-photo">
        <div class="about-text">
            <h2 class="about-title">About Me</h2>
            <p class="about-section">Some Text</p>
        </div>
    </div>
</section>

修改后的CSS #

.aboutme-container {
    background: #29326a;
    padding: 48px 0;
}

.aboutme-content {
    color: #F1F1F1;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px; /* 控制图片和文本的间距 */
    padding: 12px;
}

.aboutme-photo {
    max-width: 200px;
    object-fit: contain;
}

.about-title {
    color:#74b44a;
    text-shadow: 2px 2px #535151;
    margin-top: 0;
}

.about-section {
    text-align: justify;
    line-height: 1.6; /* 提升文本可读性 */
}

/* 移动端适配：屏幕宽度小于768px时垂直排列 */
@media (max-width: 768px) {
    .aboutme-content {
        flex-direction: column;
        text-align: center;
    }
    .about-section {
        text-align: left; /* 移动端文本左对齐更易读 */
    }
}

关键修复说明 #

• 移除所有position: absolute，让图片、文本回到Flex布局流中，由Flexbox统一控制位置
• 给文本部分套了一个about-text容器，方便Flex布局时整体控制文本块
• 用gap替代硬编码的padding，统一控制元素间距，适配不同屏幕
• 媒体查询实现响应式切换：桌面端横向排列，移动端垂直堆叠
• 去掉固定的top、height、padding-left等值，让元素自然适配容器尺寸

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