面试题：CSS Flexbox 与 Grid 布局在复杂响应式交互场景下的深度应用

Question

设计一个具有复杂交互的响应式电商产品展示页面，该页面在不同屏幕尺寸下不仅布局要自适应，而且当用户进行一些操作（如缩放、切换视图模式）时，Flexbox 或 Grid 布局需配合实现平滑的过渡效果和动态布局调整。描述实现这一需求的整体技术方案，包括布局结构设计、关键 CSS 属性的使用以及如何与 JavaScript 配合来处理交互逻辑。

Answer 1

布局结构设计

1. HTML 结构：
   • 将页面划分为不同的区域，例如产品图片展示区、产品信息区、价格区、购买按钮区等。使用语义化的 HTML 标签，如 <section>、<article>、<div> 等，提高代码的可维护性和搜索引擎友好性。例如：

   <section class="product - container">
       <article class="product - image - section">
           <img src="product - image.jpg" alt="Product Image">
       </article>
       <article class="product - details - section">
           <h1 class="product - title">Product Name</h1>
           <p class="product - description">Product description here...</p>
           <span class="product - price">$99.99</span>
           <button class="buy - button">Buy Now</button>
       </article>
   </section>
   

2. 嵌套结构：根据需要在各个区域内进行适当的嵌套。比如在产品图片展示区可能会有多个图片的轮播，就可以在 <article class="product - image - section"> 内部进一步嵌套 <div> 用于轮播容器等。

关键 CSS 属性的使用

1. Flexbox：
   • 布局属性：
     • display: flex：设置父容器为 Flex 布局，使其子元素成为 Flex 项目。例如，设置 .product - container 为 Flex 布局：

       .product - container {
           display: flex;
       }
       

     • flex - direction：控制 Flex 项目的排列方向，row（水平排列，默认值）、row - reverse、column（垂直排列）、column - reverse。在不同屏幕尺寸下，可以根据布局需要切换方向。例如，在小屏幕手机上可能希望产品图片在上，产品信息在下，即：

       @media (max - width: 600px) {
          .product - container {
               flex - direction: column;
           }
       }
       

     • justify - content：用于控制 Flex 项目在主轴上的对齐方式，如 flex - start（默认，左对齐或上对齐）、flex - end（右对齐或下对齐）、center（居中对齐）、space - between（两端对齐，项目之间间隔相等）、space - around（项目两侧间隔相等）。
     • align - items：控制 Flex 项目在交叉轴上的对齐方式，类似 justify - content，有 flex - start、flex - end、center、baseline（基线对齐）、stretch（拉伸，默认值，会使项目填满交叉轴）。
   • 过渡效果：使用 transition 属性为 Flexbox 布局的变化添加过渡效果。例如，当切换视图模式导致 flex - direction 改变时，添加过渡：

   .product - container { transition: flex - direction 0.3s ease - in - out; }

2. Grid：
   • 布局属性：
     • display: grid：设置父容器为 Grid 布局。
     • grid - template - columns 和 grid - template - rows：定义网格的列和行的轨道大小。例如：

     .product - container { display: grid; grid - template - columns: repeat(2, 1fr); grid - template - rows: auto; }

     这里 `repeat(2, 1fr)` 表示创建两列，每列宽度相等，占据可用空间的一部分。
     - `grid - column` 和 `grid - row`：指定项目在网格中的位置。例如，将产品图片放在第一列和第一行，产品信息放在第二列和第一行：
     ```css
     .product - image - section {
         grid - column: 1;
         grid - row: 1;
     }
     .product - details - section {
         grid - column: 2;
         grid - row: 1;
     }
     

   • 过渡效果：类似于 Flexbox，使用 transition 属性为 Grid 布局的变化添加过渡效果。比如当缩放页面导致 grid - template - columns 改变时：

   .product - container { transition: grid - template - columns 0.3s ease - in - out; }

3. 媒体查询：
   • 使用 @media 规则根据不同的屏幕尺寸调整布局。除了上述 flex - direction 的例子，还可以调整 grid - template - columns 等属性。例如，在平板电脑尺寸下，将 Flexbox 布局改为三列的 Grid 布局：

   @media (min - width: 601px) and (max - width: 1024px) {
      .product - container {
           display: grid;
           grid - template - columns: repeat(3, 1fr);
       }
   }
   

与 JavaScript 配合处理交互逻辑

1. 缩放处理：
   • 使用 window.onresize 事件监听器，当窗口大小改变时，重新计算布局并应用适当的 CSS 类。例如：

   window.onresize = function () {
       const productContainer = document.querySelector('.product - container');
       if (window.innerWidth <= 600) {
           productContainer.classList.add('mobile - layout');
           productContainer.classList.remove('tablet - layout', 'desktop - layout');
       } else if (window.innerWidth <= 1024) {
           productContainer.classList.add('tablet - layout');
           productContainer.classList.remove('mobile - layout', 'desktop - layout');
       } else {
           productContainer.classList.add('desktop - layout');
           productContainer.classList.remove('mobile - layout', 'tablet - layout');
       }
   };
   

   其中 mobile - layout、tablet - layout、desktop - layout 是预先定义好的不同布局的 CSS 类。
2. 切换视图模式：
   • 假设页面上有一个切换视图模式的按钮，获取按钮元素并添加点击事件监听器。例如，从列表视图切换到网格视图：

   const viewModeButton = document.querySelector('.view - mode - button');
   viewModeButton.addEventListener('click', function () {
       const productContainer = document.querySelector('.product - container');
       if (productContainer.classList.contains('list - view')) {
           productContainer.classList.remove('list - view');
           productContainer.classList.add('grid - view');
       } else {
           productContainer.classList.remove('grid - view');
           productContainer.classList.add('list - view');
       }
   });
   

   相应地，list - view 和 grid - view 是具有不同 Flexbox 或 Grid 布局样式的 CSS 类，并且在 CSS 中已经为这些类的切换添加了过渡效果。