如何使用 Flexbox 实现一个圣杯布局（两侧固定宽度，中间自适应）？

推荐答案

<div class="container">
  <header>Header</header>
  <main>Main Content</main>
  <aside class="left-sidebar">Left Sidebar</aside>
  <aside class="right-sidebar">Right Sidebar</aside>
  <footer>Footer</footer>
</div>

// www.javascriptcn.com code example
.container {
  display: flex;
  flex-direction: column; /* Stack items vertically by default */
  min-height: 100vh; /* Ensure container takes up at least full viewport height */
}

header, footer {
  background-color: #eee;
  padding: 20px;
  text-align: center;
}

main {
  background-color: #f0f0f0;
  padding: 20px;
  flex-grow: 1; /* Allow main to grow and fill available space */
  order: 2; /* Main content should be displayed after header, before sidebars */
}

.left-sidebar, .right-sidebar {
  background-color: #ddd;
  width: 200px;
  padding: 20px;
  text-align: center;
}

.left-sidebar {
  order: 1; /* Left sidebar should be displayed before main */
}

.right-sidebar {
  order: 3; /* Right sidebar should be displayed after main */
}

@media (min-width: 768px) {
  .container {
    flex-direction: row; /* Lay out horizontally on larger screens */
  }

  main {
    order: 0; /* Reset main's order */
  }

  .left-sidebar, .right-sidebar {
    order: 0; /* Reset sidebar's order */
    flex: 0 0 200px; /* Equivalent to width: 200px but more explicit */
  }

  .container > *:not(main){
        flex: 0 0 auto;
  }
}

本题详细解读

圣杯布局的定义

圣杯布局是一种常见的网页布局模式，其特点是：

• 头部 (Header) 和 底部 (Footer)：通常占据页面顶部和底部，宽度铺满整个父容器。
• 主体内容 (Main)：位于中间，高度自适应内容，并且宽度自适应。
• 两侧边栏 (Left Sidebar, Right Sidebar)：位于主体内容两侧，宽度固定。

使用 Flexbox 实现的思路

1. 容器设置:
   • 将包含所有内容的容器 .container 设置为 display: flex。
   • 初始状态下 (移动端或小屏幕)，使用 flex-direction: column 将内容垂直排列，先让header、main、sidebar、footer垂直排列。
   • 使用 min-height: 100vh; 保证容器至少占满整个视窗高度。
2. 头部和底部:
   • header 和 footer 没有特别的 flex 属性，它们会占用父容器的全部宽度。
   • 设置背景色，居中对齐等样式。
3. 主内容区:
   • main 元素设置 flex-grow: 1，使其可以自动扩展并占据剩余空间。
   • 使用 order:2确保在小屏幕垂直排列时， main元素排序在中间，在 left-sidebar 和 right-sidebar 之间，因为 order 默认为0。
4. 左右侧边栏:
   • left-sidebar 和 right-sidebar 设置固定的宽度，例如 width: 200px。
   • 使用 order 调整他们的显示位置。
5. 响应式布局:
   • 使用媒体查询 (@media (min-width: 768px)) 在大屏幕上应用横向排列。
   • 修改 .container 为 flex-direction: row，将布局改为水平排列。
   • 设置 flex: 0 0 200px 给侧边栏，相当于 flex-basis: 200px， 并且使其不进行伸缩，保证固定宽度。
   • main 元素将 order 属性重置，此时会按照DOM结构的位置进行排序。
   • 使用 flex:0 0 auto; 给除main以外的元素，确保其他元素不进行伸缩。

代码解释

• display: flex;: 启用 Flexbox 布局。
• flex-direction: column;: 将 flex 容器中的元素垂直排列。
• min-height: 100vh;: 保证 flex 容器至少占据整个视口的高度。
• flex-grow: 1;: 允许 flex 项目增长以填充可用空间。
• width: 200px;: 设置元素的固定宽度。
• flex: 0 0 200px;: flex-grow和flex-shrink 都设为0，表示元素不伸缩， flex-basis为200px，表示初始大小为200px， 相当于固定了宽度为200px。
• order: 设置 flex 项目的显示顺序。
• @media (min-width: 768px): 媒体查询，指定在屏幕宽度大于等于 768 像素时应用样式。

优点

• 灵活性: Flexbox 布局非常灵活，可以轻松处理各种尺寸和屏幕布局。
• 响应式: 可以通过媒体查询轻松实现响应式布局，适配不同屏幕尺寸。
• 简化代码: Flexbox 代码比传统布局方法（如浮动）更简洁易懂。

通过上述步骤，我们使用 Flexbox 成功实现了一个圣杯布局。这种布局在大多数情况下都能满足需求，并且代码简洁易维护。