本文详解如何通过 css flexbox 与媒体查询，将网页精准划分为左右两个自适应区域，并确保在移动端自动堆叠，兼顾语义结构、可维护性与响应式体验。
本文详解如何通过 css flexbox 与媒体查询，将网页精准划分为左右两个自适应区域，并确保在移动端自动堆叠，兼顾语义结构、可维护性与响应式体验。
在现代前端开发中，实现左右分栏布局最推荐的方式是使用 CSS Flexbox，而非传统的浮动（float）或表格（table）方案。它语义清晰、代码简洁、天然支持响应式断点控制，且浏览器兼容性良好（IE10+ 支持，主流浏览器全面支持）。
✅ 正确的 HTML 结构组织
首先需修正原始 HTML 的嵌套与标识问题：
- 将左侧
的 class="left-section" 统一改为 id="left-section"，与右侧保持一致，便于 CSS 精准选择； - 使用一个外层容器（如 ）包裹左右两栏，作为 Flex 布局的根容器；），保证 DOM 结构合法。
- 移除冗余闭合标签（如原代码末尾多出的
<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%20pic.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>
? 提示：为提升可访问性与 SEO，建议为
添加描述性 alt 文本（已优化），并为外部链接添加 target="_blank" 与 rel="noopener noreferrer"（生产环境推荐补充）。
? Flexbox 响应式 CSS 实现
核心样式仅需三步：
- 启用 Flex 布局：对 .container 设置 display: flex，默认主轴为水平方向；
- 设置基础断点：在 ≥600px 屏幕上，左右两栏各占 50% 宽度；
- 移动端回退：小于 600px 时，Flex 默认 flex-direction: row → 自动换行为 column（需显式声明更稳妥）。
.container {
display: flex;
flex-wrap: wrap; /* 允许换行，为移动端堆叠做准备 */
gap: 2rem; /* 推荐使用 gap 替代 margin，更可控（Chrome 100+ / Firefox 63+ 支持） */
}
#left-section,
#right-section {
flex: 1 1 100%; /* 默认移动优先：单栏占满全宽 */
}
@media screen and (min-width: 600px) {
#left-section,
#right-section {
flex: 1 1 50%; /* ≥600px 时均分宽度 */
}
}
/* 可选：增强移动端体验 */
@media screen and (max-width: 599px) {
.container {
flex-direction: column;
}
#left-section,
#right-section {
width: 100%;
}
}
✅ 优势说明：
- flex: 1 1 50% = flex-grow: 1 + flex-shrink: 1 + flex-basis: 50%，确保弹性伸缩与基准宽度统一；
- flex-wrap: wrap 配合 flex-direction: column 在小屏下实现自然垂直堆叠；
- gap 属性替代传统 margin，避免父子边距塌陷问题，布局更可靠。
⚠️ 注意事项与最佳实践
- 不要滥用 width: 50%：直接写死宽度会丧失 Flex 弹性能力，应优先使用 flex 属性控制；
- 避免 ID 选择器过度嵌套：如 #left-section .portfolio-nav ul li，推荐用 BEM 或语义类名提升可维护性；
- 图片响应式处理：为 #profile-pic img 添加 max-width: 100%; height: auto; 防止溢出；
- 无障碍增强：.social-link button 中的 标签语义冗余（按钮内嵌链接不符合 ARIA 规范），建议统一用 并添加 role="button"，或改用纯 。
✅ 总结
通过一个轻量 .container 包裹 + display: flex + 媒体查询，即可优雅实现左右分栏响应式布局。该方案具备高可读性、强扩展性与良好兼容性，是构建个人作品集、简介页等单页应用的理想选择。记住：移动优先、语义正确、弹性优先、渐进增强——这是现代 CSS 布局的黄金法则。
