面试题-圣杯布局，flex嵌套实现

surgicalMask

于 2024-08-29 10:48:08 发布

阅读量554

点赞数 14

文章标签：前端

本文链接：https://blog.csdn.net/surgicalMask/article/details/141672444

版权

圣杯布局，页首栏，页尾栏，页面的主要内容分为三栏，左右侧边栏宽度固定，中间栏宽度自适应。

采用flex嵌套实现

效果如下：

外层flex，flex-direction: column;规定方向从上往下，flex-grow: 1;控制中间的主要内容栏自动填充父容器的剩余空间。

页首

主要内容

页尾

内层flex，flex-direction默认值为row，方向从左到右，左侧栏和右同测栏设置固定宽度，同样使用flex-grow: 1;控制中间栏自动填充父容器的剩余空间。

左侧栏

中间栏

右测栏

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>flex圣杯布局示例</title>
  </head>
  <body>
    <div class="main-wrapper">    
      <div class="header">页首</div>
      <div class="main-content">
        <div class="sidebar">左侧栏</div>
        <div class="content">中间栏</div>
        <div class="sidebar">右侧栏</div>
      </div>
      <div class="footer">页底</div>
    </div>

  </body>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .header, .footer {
      background-color: #333;
      color: white;
      text-align: center;
      line-height: 50px;
      width: 100%;
    }

    .main-wrapper {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    .main-content {
      flex-grow: 1;
      display: flex;
    }

    .sidebar {
      background-color: #f4f4f4;
      width: 200px;
    }

    .content {
      flex-grow: 1;
      background-color: #ddd;
    }
  </style>
</html>