虽然flex布局闻起来很香，但是目前国内很多pc页面都是传统的浮动位置布局，可能考虑到了兼容性和以前的系统。 flex实现的圣杯布局特点如下：整体分为上中下三部分，中间部分高度自适应，底部footer位于页面底部，即使中间部分高度不够，中间部分也分为左中右三部分，左右宽度固定，中间部分宽度不固定，不太固定
代码如下。
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' padding: 0； } html，body{ height: 100%； /*这里之所以将高度设为100%，是因为中央部分支撑到页面下方。 */} body{ display: flex； flex-direction: column； /*父容器为flex纵向布局*/} header，footer{ height: 100px； 背景色： # CCC； flex :00自动； /*设置头部和底部不缩放*/} main { flex :10自动； /*中部按比例缩放*/width: 80%； margin : 0自动； 显示： Flex； flex横向布局*.left， right{ width: 200px； /* flex-grow: 0； * /背景色： # 757575； } .middle{ flex-grow: 1； /*宽度自动缩放* /背景色： # 7734 B6； }/style/headbodyheaderheader/headermaindivclass=' left ' left/divdivclass=' middle ' middle/divdivclass=' right