用 Flex 布局实现左右分栏产品页：外层设 display: flex、flex-direction: row、align-items: center、gap: 2rem；左侧图片固定宽，右侧 .product-info 设 flex: 1 并加 min-width: 0 防溢出；小屏下 @media (max-width: 768px) 切换为 column 堆叠，图片 width: 100%。
用 Flex 布局实现左右分栏的产品介绍页，核心是让左侧放产品图（或主视觉），右侧放标题、简介、参数、按钮等文字信息，整体简洁清晰、响应友好。
基础结构：容器 + 两个子区块
HTML 结构保持语义化，用一个 .product-section 包裹左右两块：
<section class="product-section">
<div class="product-image"><img src="phone.jpg" alt="旗舰手机"></div>
<div class="product-info">
<h2>NeoPhone X1</h2>
<p>超轻钛合金机身，双模卫星通信，48小时续航。</p>
<ul>
<li>屏幕：6.7″ OLED，120Hz</li>
<li>芯片：NeoChip Pro</li>
<li>价格：<strong>¥5,999</strong></li>
</ul>
<button>立即购买</button>
</div>
</section>
Flex 布局关键设置
给外层容器设 display: flex，并控制主轴方向、对齐与换行行为：
- 默认主轴为水平（flex-direction: row），适合左右分栏
- 用 align-items: center 垂直居中右侧内容（避免图文高度不匹配时错位）
- 加 gap: 2rem 统一左右间距，比用 margin 更干净
- 右侧内容区可设 flex: 1 自适应剩余宽度，左侧图片区设固定宽或 max-width 防撑破
响应式处理：小屏堆叠显示
在移动端，左右分栏体验差，直接切为上下排列：
立即学习“前端免费学习笔记（深入）”；
- 用 @media (max-width: 768px) 触发断点
- 将容器设为 flex-direction: column
- 图片设 width: 100%，避免溢出；右侧文字区保持自然流式
- 可选：给图片加 margin-bottom: 1.5rem 提升上下呼吸感
细节优化建议
让页面更专业、易读：
- 右侧文字区用 font-size: 1rem 起步，标题用 1.5rem，层级分明
- 按钮加 margin-top: 1.25rem 和 padding: 0.75rem 2rem，有足够点击区域
- 图片外层 .product-image 加 display: flex + justify-content: center 居中对齐，避免靠左偏移
- 避免给子项设 float 或 position: absolute —— Flex 本身已解决定位问题
不复杂但容易忽略：Flex 的 min-width: 0 在某些场景下能防止文字溢出（尤其长英文或未折行中文），可在 .product-info 上加上。
