css简单产品介绍页如何布局_使用flex实现左右分栏

用 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 包裹左右两块：

  @@##@@
  
    
NeoPhone X1
    
超轻钛合金机身，双模卫星通信，48小时续航。
    

      
屏幕：6.7″ OLED，120Hz
      
芯片：NeoChip Pro
      
价格：¥5,999
    
    立即购买
  

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 上加上。