如果你还没有了解过flex布局，建议你赶紧去学习，虽然它在pc上兼容性还有点问题，但是在移动端已经完全没有问题了，微信官方推出的weui这个框架就大量地使用了这种布局，以下是2个学习这种布局方式的非常好的资源：

flex布局即将成为网页布局的首选方案，当你看到用flex来实现圣杯布局的代码有多简单的时候，你就会觉得前面那句话一点都没错。使用flex，可以只用同一段css实现第2部分提到的五种布局：

侧边栏宽度固定主内容栏宽度自适应主内容栏宽度自适应侧边栏宽度固定左侧边栏宽度固定主内容栏宽度自适应右侧边栏宽度固定第1个侧边栏宽度固定第2个侧边栏宽度固定主内容栏宽度自适应主内容栏宽度自适应第1个侧边栏宽度固定第2个侧边栏宽度固定

.layout { display .layout__main { flex .layout__aside { width .layout > .layout__aside:not(:first-child), .layout > .layout__main:not(:first-child){ margin-left

效果与第2部分每种布局做法的结果一模一样，但是代码减少了很多，而且适用的场景更多，比如4栏布局，5栏布局。

本文提供了4种圣杯布局的方法，每种方法在当前或者将来的工作中，肯定会有很多场景都需要使用，所以有必要完全掌握这些方法，内容不多，也不复杂，希望能对你有用，谢谢阅读：）

补充：原本只想介绍圣杯布局这一种方法，后来觉得这样的内容有点粗糙，于是又专门去学习了另外2种分栏布局的方法，补充到了文章里面（也就是第3、4部分），所以文章虽然题为圣杯布局，但实际上讲的是分栏布局的常用方法，只有第2部分才能算是准确的圣杯布局的内容。由于本文在发布前后编辑了多次，导致标题跟内容有些脱节，请勿见怪：（

本文相关代码下载