本文详解如何通过 css flexbox 结合媒体查询，将网页划分为左右两个自适应区域，确保在桌面端并排显示、移动端堆叠排列，并提供完整可运行的 html/css 示例与关键注意事项。
本文详解如何通过 css flexbox 结合媒体查询，将网页划分为左右两个自适应区域，确保在桌面端并排显示、移动端堆叠排列，并提供完整可运行的 html/css 示例与关键注意事项。
在现代前端开发中，实现左右分栏（如个人主页左侧展示头像与导航、右侧呈现简介与社交链接）最简洁高效的方式是采用 CSS Flexbox 布局，辅以 响应式媒体查询（Media Queries） 控制断点行为。无需依赖第三方框架，纯原生 CSS 即可达成语义清晰、性能优良且高度可控的双栏结构。
✅ 正确的 HTML 结构组织
首先需修正原始 HTML 中的嵌套与标识问题：
- 移除冗余闭合 </div> 标签；
- 将左右两栏统一包裹于一个语义化容器（如 <div class="container">）；
- 统一使用 id（而非混用 class）标识左右主区块，便于 CSS 精准控制（如 #left-section 与 #right-section）。
<div class="container">
<section id="left-section">
<div class="portfolio-nav">
<ul>
<li>Sanjeet Kumar</li>
<li>Front-End Developer</li>
</ul>
</div>
<div id="profile-pic">
<img src="./image/profile pic.jpeg" alt="Sanjeet Kumar's profile picture" />
</div>
</section>
<section id="right-section">
<div id="intro">
<h1>Hi, My Name is Sanjeet Kumar.</h1>
<p>Front-End React JS Developer,<br>Aspiring DevOps Engineer!</p>
</div>
<div class="social-link">
<button><a href="https://github.com/Kumarsanjeet1" target="_blank">GitHub</a></button>
<button><a href="https://www.linkedin.com/in/sanjeet-kumar-86a418203" target="_blank">LinkedIn</a></button>
<button><a href="https://twitter.com/Krsanjeets" target="_blank">Twitter</a></button>
<button><a href="https://www.instagram.com/krsanjeets/" target="_blank">Instagram</a></button>
</div>
</section>
</div>? 注意：为提升可访问性与用户体验，所有外部链接建议添加 target="_blank" 和 rel="noopener noreferrer"（生产环境请补全）。
? 核心 CSS：Flexbox + 响应式断点
使用 display: flex 作为容器基础布局，并通过媒体查询在视口宽度 ≥ 600px 时启用并排模式：
.container {
display: flex;
flex-wrap: wrap;
gap: 2rem; /* 推荐使用 gap 替代 margin，更可靠 */
padding: 1rem;
}
/* 移动端默认：左右区块垂直堆叠（flex-direction: column 默认生效） */
#left-section,
#right-section {
width: 100%;
flex: 1 1 auto;
}
/* 平板及桌面端：并排显示，各占 50% 宽度 */
@media (min-width: 600px) {
#left-section,
#right-section {
width: 50%;
}
}
/* 可选增强：适配更大屏幕（如 ≥ 992px），微调间距与内边距 */
@media (min-width: 992px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
#left-section,
#right-section {
width: 48%; /* 预留 gap 空间 */
}
}✅ 关键要点说明：
- flex-wrap: wrap 允许子项在空间不足时换行（虽此处仅两列，但增强健壮性）；
- gap: 2rem 比手动设置 margin 更安全，避免外边距合并（margin collapse）问题；
- 移动端默认 width: 100% 保证单列流式布局，无需额外声明 flex-direction；
- 媒体查询断点 600px 是常见移动/平板分界值，可根据设计稿调整（如 768px 或 992px）。
? 进阶建议（提升专业度）
- 图片响应式：为 #profile-pic img 添加 max-width: 100%; height: auto; 防止溢出；
- 按钮样式优化：移除 <a> 的默认下划线，统一背景色与圆角，增强点击反馈（:hover, :focus）；
- 无障碍增强：为 <button> 内部 <a> 添加 aria-label，或直接用 <a role="button"> 替代嵌套；
- 性能提示：避免在媒体查询中重复定义字体、颜色等全局样式，仅控制布局相关属性。
通过以上结构与样式组合，即可稳定实现如参考图所示的左右分栏响应式页面——桌面端优雅并列、移动端自然堆叠，兼顾语义、可维护性与跨设备兼容性。
