如何使用 Flexbox 与 CSS Grid 实现文本框与图片网格的水平对齐

本文讲解如何将文本区域与四宫格图片并排布局（左文右图），通过合理嵌套 flexbox 容器替代原有分离结构，消除 transform 偏移导致的错位问题，并确保响应式对齐与视觉一致性。

在实际开发中，初学者常误将 display: grid 和 display: flex 视为互斥方案，但二者协同使用往往更高效：Flexbox 负责宏观布局（如左右分区），Grid 负责微观结构（如图片网格排列）。你当前的问题根源在于：

• .overview（文本）与 .flex-box > #grid-container（图片网格）是两个独立、无关联的块级元素；
• 图片项大量使用 transform: translate() 扰乱了 Grid 的自然流式定位，造成视觉下沉与溢出；
• .overview 设置 width: 30% 却未约束父容器宽度，而 #grid-container 固定宽高（600px）且居中（margin: 0 auto），导致二者无法真正“并排”。

✅ 正确解法是：将文本容器和图片容器共同作为 Flexbox 子项，由同一父容器（.flex-box）统一控制水平排列与对齐。

✅ 推荐实现步骤

1. 结构优化：合并为同一 Flex 容器

   <div class="flex-box">
     <!-- 文本区 -->
     <div class="overview">
       <div class="overview-text">...</div>
     </div>
     <!-- 图片区（原 grid-container） -->
     <div id="grid-container">
       <div class="grid-item"><img src="..."></div>
       <!-- 其余三项 -->
     </div>
   </div>

2. CSS 调整：启用弹性主轴对齐

   

   Vondy

   下一代AI应用平台，汇集了一流的工具/应用程序

   下载

   立即学习“前端免费学习笔记（深入）”；

   .flex-box {
     display: flex;
     align-items: flex-start; /* 防止因内容高度差异导致基线错位 */
     gap: 40px; /* 推荐用 gap 替代 margin，语义更清晰 */
     padding: 20px;
     max-width: 1200px;
     margin: 0 auto;
   }
   
   .overview {
     flex: 0 0 35%; /* 固定宽度占比，避免文本撑开 */
     min-width: 300px;
   }
   
   #grid-container {
     flex: 0 0 60%; /* 与文本区加起来接近 100%，留出 gap 空间 */
     width: 100%; /* 移除固定宽高，交由 flex 控制 */
     height: auto;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 300px); /* 显式设定行高，避免高度塌陷 */
     /* ⚠️ 关键：彻底移除所有 transform！Grid 本身已具备精确定位能力 */
   }
   
   .grid-item {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
   }
   
   #image {
     max-width: 100%;
     max-height: 100%;
     object-fit: cover; /* 保持比例，裁剪适配 */
   }

3. 注意事项与最佳实践

   • ❌ 避免在 Grid 子项上滥用 transform：它会脱离文档流，干扰 align-items 和 justify-items 的计算，且不利于可访问性与响应式适配。
   • ✅ 使用 gap 而非 margin 控制子项间距，更可靠、无坍塌风险。
   • ✅ 为 .overview 和 #grid-container 设置 flex: 0 0 [width]，防止内容过长时破坏布局。
   • ✅ 图片使用 object-fit: cover + max-width/height: 100%，确保网格项内自适应填充，不拉伸变形。
   • ? 响应式增强（可选）：

     @media (max-width: 768px) {
       .flex-box {
         flex-direction: column;
         align-items: stretch;
       }
       .overview, #grid-container {
         flex: none;
         width: 100%;
       }
     }

通过以上调整，文本与图片网格将真正实现语义化、可维护、响应式的水平并排布局——左侧文字清晰传达信息，右侧网格精准展示视觉内容，无需 hack 式偏移，也无需牺牲可访问性与扩展性。