本文详解如何使用 flexbox 和媒体查询将网页划分为左右两栏，并在小屏设备上自动堆叠为单列，确保布局既结构清晰又完全响应式。
本文详解如何使用 flexbox 和媒体查询将网页划分为左右两栏，并在小屏设备上自动堆叠为单列，确保布局既结构清晰又完全响应式。
要实现如图所示的左右分栏响应式布局（左侧展示个人导航与头像，右侧呈现简介与社交链接），核心在于语义化容器包裹 + Flexbox 主轴控制 + 断点适配。直接修改原始 HTML 结构并配合 CSS，即可达成跨设备一致、可维护性强的双栏效果。
✅ 正确的 HTML 结构重构
首先，需将两个 <section> 统一包裹在语义化容器中（推荐使用 <div class="container">），并统一使用 id（如 #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" rel="noopener">GitHub</a></button>
<button><a href="https://www.linkedin.com/in/sanjeet-kumar-86a418203" target="_blank" rel="noopener">LinkedIn</a></button>
<button><a href="https://twitter.com/Krsanjeets" target="_blank" rel="noopener">Twitter</a></button>
<button><a href="https://www.instagram.com/krsanjeets/" target="_blank" rel="noopener">Instagram</a></button>
</div>
</section>
</div>✅ 关键优化说明：
- 添加 target="_blank" 与 rel="noopener" 提升外链安全性；
- 修正 <img> 的 alt 属性为描述性文本，增强可访问性（a11y）；
- 移除冗余闭合标签（如原代码末尾孤立的 </div>），确保 DOM 结构合法。
? 响应式 CSS 实现（Flexbox + Media Query）
使用现代 Flexbox 布局，无需浮动或绝对定位，简洁可靠：
.container {
display: flex;
flex-wrap: wrap;
gap: 2rem; /* 推荐：替代 margin，更可控的间距 */
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem;
}
#left-section,
#right-section {
flex: 1 1 100%; /* 默认移动端：占满整行 */
min-width: 300px; /* 防止过窄内容挤压 */
}
/* 平板及以上设备：左右均分 */
@media (min-width: 768px) {
#left-section,
#right-section {
flex: 1 1 50%;
}
}
/* 桌面大屏增强（可选） */
@media (min-width: 1024px) {
.container {
padding: 2rem;
}
#left-section {
max-width: 480px; /* 控制头像区宽度，避免拉伸失真 */
}
}? 为什么用 flex: 1 1 50%？
flex-grow: 1 允许等比扩展，flex-shrink: 1 保证压缩时协调缩放，flex-basis: 50% 设定基础宽度——三者结合，比单纯写 width: 50% 更健壮，能自动处理内容溢出与弹性对齐。
⚠️ 注意事项与最佳实践
- 图片响应式：为 #profile-pic img 添加 max-width: 100%; height: auto;，防止大图撑破容器；
- 按钮可访问性：<button> 内嵌 <a> 在语义上略冗余；更推荐直接用 <a> 并通过 CSS 设置 display: inline-flex 或 display: block + padding 模拟按钮样式；
- 字体与行高：在 #intro h1 和 p 中设置 line-height: 1.5 和 font-weight: 600，提升可读性；
- 移动端优先：上述 CSS 遵循“移动优先”原则，基础样式适配小屏，再通过 @media 增强大屏体验，符合现代前端开发规范。
✅ 总结
只需三步即可完成专业级响应式双栏布局：
1️⃣ 用 <div class="container"> 包裹左右区块；
2️⃣ 应用 display: flex + flex-wrap 构建弹性容器；
3️⃣ 通过 @media (min-width: 768px) 切换 flex-basis 实现断点分栏。
该方案兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ v12），零依赖、高性能、易扩展——是构建个人作品集、企业介绍页等双栏场景的首选实践。
