如何使用flexbox实现参考图中的目标页面布局？

完整代码示例 #

HTML 结构 #

<div class="layout-container">
  <header class="site-header">头部通栏</header>
  <div class="site-body">
    <aside class="sidebar-left">左侧固定边栏</aside>
    <main class="main-content">自适应主内容区</main>
    <aside class="sidebar-right">右侧固定边栏</aside>
  </div>
  <footer class="site-footer">底部通栏</footer>
</div>

CSS 样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-header, .site-footer {
  height: 64px;
  background-color: #e2e8f0;
}

.site-body {
  flex: 1;
  display: flex;
}

.sidebar-left, .sidebar-right {
  width: 240px;
  background-color: #cbd5e1;
}

.main-content {
  flex: 1;
  background-color: #f1f5f9;
}

核心配置说明 #

• 最外层容器设置flex-direction: column实现垂直方向排列，配合min-height: 100vh撑满整个视口高度
• 中间内容容器设置flex: 1，自动填充头部和底部之外的所有剩余垂直空间
• 中间内容容器内部开启display: flex实现水平三栏布局，左右侧边栏固定宽度，主内容区设置flex: 1自动填充剩余水平空间
• 响应式适配可在媒体查询中为.site-body设置flex-direction: column，同时将侧边栏宽度调整为100%，即可实现移动端纵向排列效果

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