Cyril-Blog
Cyril-Blog copied to clipboard
Cyrilszq
关于圣杯布局
最早听说圣杯布局是刚接触前端时刷百度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，但用它来进行整体布局确实会简单很多。
Issues是支持代码块语法高亮的，例如：
console.log("Hello World!")
Markdown可以这样写：
``` JavaScript
console.log("Hello World!")
```
