求助：用CSS Flexbox实现带顶部菜单栏的2x2移动端弹性栅格布局

嘿，我来帮你搞定这个Flexbox布局问题！完全不用Grid，靠Flexbox+媒体查询就能实现兼容旧浏览器的效果，下面是具体方案：

核心思路拆解 #

• 顶部菜单栏用position: fixed固定，避免页面滚动时消失，同时给body加内边距防止内容被遮挡
• 2x2栅格通过Flexbox的flex-wrap: wrap实现自动换行，用padding-top维持宽高比（兼容不支持aspect-ratio的旧浏览器）
• 媒体查询切换布局：竖屏时栅格和紫色容器垂直堆叠，横屏时改成水平排列，紫色容器占剩余空间

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <style>
    /* 重置默认样式，避免浏览器差异 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* 固定顶部菜单栏 */
    .menu-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px; /* 固定高度 */
      background-color: #333; /* 深灰色 */
      z-index: 100; /* 确保在最上层 */
    }

    /* 给body加顶部内边距，避免内容被菜单栏遮挡 */
    body {
      padding-top: 60px;
    }

    /* 主内容容器 */
    .content-wrapper {
      padding: 20px;
      gap: 20px; /* 元素间距 */
    }

    /* 2x2栅格容器 */
    .grid-container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      max-width: 600px; /* 横屏时的最大宽度，维持宽高比 */
    }

    /* 栅格项：每个占50%宽度，用padding-top维持正方形比例 */
    .grid-item {
      width: 50%;
      padding-top: 50%; /* 1:1宽高比，兼容旧浏览器 */
      background-color: lightblue; /* 蓝色底 */
      border: 2px solid white; /* 白色边框区分项 */
      position: relative; /* 方便内部内容定位 */
    }

    /* 栅格项内部内容居中（可选） */
    .grid-item .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    /* 紫色容器 */
    .purple-container {
      background-color: #9370DB; /* 紫色 */
      padding: 20px;
      color: white;
    }

    /* 横屏布局（以768px为分界，可按需调整） */
    @media (min-width: 768px) {
      .content-wrapper {
        display: flex;
        align-items: flex-start; /* 让栅格和紫色容器顶部对齐 */
      }

      .purple-container {
        flex: 1; /* 占据剩余可用空间 */
      }
    }
  </style>
</head>
<body>
  <header class="menu-bar"></header>
  <main class="content-wrapper">
    <div class="grid-container">
      <div class="grid-item">
        <div class="content">1</div>
      </div>
      <div class="grid-item">
        <div class="content">2</div>
      </div>
      <div class="grid-item">
        <div class="content">3</div>
      </div>
      <div class="grid-item">
        <div class="content">4</div>
      </div>
    </div>
    <div class="purple-container">
      这里是紫色容器的内容，横屏时会在栅格侧边，竖屏时在栅格下方
    </div>
  </main>
</body>
</html>

关键细节说明 #

• 菜单栏固定：用position: fixed脱离文档流，z-index确保不会被其他内容覆盖
• 栅格宽高比：通过padding-top: 50%实现1:1比例（因为padding百分比基于父元素宽度），比aspect-ratio更兼容旧浏览器（比如IE11）
• 媒体查询切换：当屏幕宽度大于768px时，把主内容容器改成display: flex，紫色容器设置flex:1自动填充剩余空间
• 兼容性：所有属性都支持IE11及以上现代浏览器，完全符合你的兼容要求

内容的提问来源于stack exchange，提问作者user9313319