# 圣杯布局

使用 flex 实现的圣杯布局。

# 需求

圣杯布局左中右三列布局,渲染顺序中间列书写在前保证提前渲染,左右两列定宽,中间列自适应剩余宽度。

圣杯布局与双飞翼布局的不同之处,圣杯布局的的左中右三列容器没有多余子容器存在,通过控制父元素的 padding 空出左右两列的宽度。

# 关键点

  • 圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置
  • 圣杯布局的关键点父元素需要设置 padding
  • 圣杯布局的关键点 margin-left 取值为百分比时,是以其父元素的宽度为基准的

HTML:

// pug 模板引擎
div.g-container
    div.g-middle middle
    div.g-left left
    div.g-right right

SCSS:

.g-container {
    position: relative;
    height: 100vh;
    min-width: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    
    & > div {
        height: 100vh;
        text-align: center;
        color: #fff;
        line-height: 100vh;
        font-size: 3vw;
    }
}

.g-middle {
    order: 2;
    flex: auto 1 0 ;
    background: #cc6630;
}

.g-left {
    order: 1;
    flex: 200px 0 0;
    background: #ffcc00;
}

.g-right {
    order: 3;
    flex: 200px 0 0;
    background: pink;
}

效果如下(点击 Pug/SCSS 可以对代码进行编辑):

阅读全文