关于圣杯布局 #1

Cyrilszq · 2017-01-13T04:12:35Z

最早听说圣杯布局是刚接触前端时刷百度ife看到的，当时给出的方案是这样的双飞翼布局介绍。当时啥都不懂，觉得怎么这么麻烦扫了一遍直接跳过。时隔半年，js学了不少，CSS感觉没多大进步，看网格布局这篇博客的时候看到这样一个需求:

圣杯布局是一种网页布局，由四部分组成：一个页眉，页脚和一个主要内容区域，有两个侧边，每边一个。布局遵循一下规则：
1.两边带有固定宽度中间可以流动（fluid）
2.中心列最先出现在标记中
3.所有三列不管其中内容如何变化，都应该是相同的高度
4.页脚应该总是在浏览器视窗的底部，即便内容不填满整个适口的宽度
5.响应式布局，在较小的视口中，各部分要进行折叠，宽度100%显示

想了一会，居然想不出很好的解决方案，因为按照一般的三栏式布局只需要在html中把left,right放在main前面，然后分别让left,right左右浮动，并设置main的margin就可以实现。但这题需要将中心列最先出现在标记中，上面的方法显然是不行的。搜了一下前三个需求基本都是用float,position,negative margin解决，思路都和双飞翼布局介绍这里介绍的一样,属于兼容性很好的方案。至于第四个需求，传统方法可以使用绝对定位或负边距，较灵活的方案可以用《CSS揭秘》提到了两个解决方案:CSS calc和CSS flex。最后一个需求直接媒体查询改一些float,position问题应该不大。

然后感觉flex应该可以实现这些需求，不考虑兼容性的话应该没必要用那么麻烦的方法。试了一下，果然简单很多，代码如下：

html:

<body>
    <div class="header">header</div>
    <div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

.header {
    height: 3em;
    background-color: red;
}

.container {
    display: flex;
    flex: 1;
}

.main {
    flex: 1;
    background-color: green;
}

.left {
    width: 200px;
    background-color: aqua;
    order: -1; //定义项目的排列顺序。数值越小，排列越靠前，默认为0。
}

.right {
    width: 230px;
    background-color: blue;
}

.footer {
    background-color: gray;
}

@media (max-width: 800px) {
    .container {
        flex-flow: column;
    }

    .left,
    .right {
        width: 100%;
    }
}

效果：

用flex只要这么点代码就把这几个需求全部实现。
网格布局这篇博客介绍了网格布局的用法，并举了如何用网格布局实现这些需求，虽说现在兼容性基本等于0，但用它来进行整体布局确实会简单很多。

CodeDaraW · 2017-01-13T14:05:23Z

Issues是支持代码块语法高亮的，例如：

console.log("Hello World!")

Markdown可以这样写：

    ``` JavaScript
    console.log("Hello World!")
    ```

Cyrilszq · 2017-01-14T01:01:47Z

@CodeDaraW 哦哦这样啊，这个编辑时候不好保存，我怕手抖，我是直接在atom上写完复制过来的。
试了一下原来atom也是可以的……

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

关于圣杯布局 #1

关于圣杯布局 #1

Cyrilszq commented Jan 13, 2017 •

edited

Loading

CodeDaraW commented Jan 13, 2017

Cyrilszq commented Jan 14, 2017 •

edited

Loading

关于圣杯布局 #1

关于圣杯布局 #1

Comments

Cyrilszq commented Jan 13, 2017 • edited Loading

CodeDaraW commented Jan 13, 2017

Cyrilszq commented Jan 14, 2017 • edited Loading

Cyrilszq commented Jan 13, 2017 •

edited

Loading

Cyrilszq commented Jan 14, 2017 •

edited

Loading