使用flex实现圣杯布局

圣杯布局

首先需要了解圣杯布局的概念：圣杯布局是指左右宽度固定中间自适应的布局方式，是一个经典的布局

实现方式

在这里我使用的是flex方式来实现我们的圣杯布局。

布局思路：1，需要有三个盒子上中下排列；

2，头部盒子和底部盒子给个宽高背景颜色就行；

3，圣杯布局的主要是中间内容部分，所以大部分在中间的盒子中完成：

首先HTML结构如下：

<div class="header">
    <h1>头部</h1>
</div>
<div class="content">
    <div class="left">
      <h1>左</h1>
    </div>
    <div class="middle">
      <h1>中</h1>
    </div>
    <div class="right">
      <h1>右</h1>
    </div>
</div>
<div class="footer">
    <h1>底部</h1>
</div>

在这里我们需要注意的是，结构的嵌套，不要将结构嵌套错误。

圣杯布局实现主要是css样式实现：

• 对于中间的大盒子，也就是父盒子，给上flex属性(具体使用可以参照官网)。
• 中间父盒子中的三个子盒子，左右两个盒子给定宽度，
• 父盒子中的中间子盒子，设置属性flex= 1即可

接下就是CSS样式：

 /* 样式初始化，也称为四无大法 */
    * {
      margin: 0;
      padding: 0;
    }

    .header {
      width: 100%;
      height: 60px;
      background-color: aqua;
      text-align: center;
    }

    .content {
      display: flex;
      justify-content: space-between;
      height: 600px;
      color: #fff;
    }

    .left {
      width: 100px;
      height: 100%;
      background-color: red;
      text-align: center;
    }

    .right {
      width: 100px;
      height: 100%;
      background-color: pink;
      text-align: center;
    }

    .middle {
      /* flex为1，就是表示占据宽度剩余的全部 */
      flex: 1;
      height: 100%;
      background-color: royalblue;
      text-align: center;
    }

    .footer {
      width: 100%;
      height: 60px;
      background-color: aqua;
      text-align: center;
    }

   效果图如下：

这就是使用flex实现圣杯布局的方法，当然还有其他的方式可以实现圣杯布局。也欢迎大家在此分享其他的方法。