圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
本章就用flex布局来设计圣杯布局
先放上代码
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link href="2-2.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="box"> <header class="header">#header</header> <div class="main-content"> <div class="child left">#left</div> <div class="child center">#center</div> <div class="child right">#right</div> </div> <footer class="footer">#footer</footer> </div> </body> </html>
css代码
*{ text-align:center; font-size:30px; } .box{ display:flex; flex-wrap:wrap; // border:1px solid red; flex-direction:column;//我们这里设置的排列方式竖向排列，也就是说主轴是从上到下的。 height:600px; width:900px; } .header{ flex-basis:20%;//这个属性设置的改项目占主轴长度的比例。 background:rgb(102,102,102); color:rgb(255,255,255); line-height:4.5em; } .main-content{ flex-basis:60%; display:flex;//中间部分又分三个模块，所以将中间部分也设置成flex布局。 background:yellow; color:rgb(0,0,0); line-height:13.5em; } .footer{ flex-basis:20%; background:rgb(102,102,102); color:rgb(255,255,255); line-height:4.5em; } .child:nth-child(1){ flex-basis:20%; background:rgb(119,187,221); } .child:nth-child(2){ flex-basis:60%; background:rgb(214,214,214); } .child:nth-child(3){ flex-basis:20%; background:rgb(255,102,51); }
注意事项：1.flex布局中项目是不分块状元素与内联元素的。也即是原来html中的内敛元素也是可以设置宽度的。
2.我们可以给其中的项目设置长和宽的值，这样是可以的，如果你没有设置宽度的话，你可以通过flex-basis属性设置项目在主轴上的长度比例。
举一个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link href="1.css" rel="stylesheet" type="text/css"/> </head> <div class="box"> <span class="child"></span> <span class="child"></span> </div> </body> </html>
如果我们没有设置span的长和宽的话，设置它们的flex-basis属性为：50%;justify-content:space-between;且如果我们设置的主轴就是横轴的话，那这两个项目会在一排排列，结果如下
且大家注意到了一个地方，他的高是占据整个容器的高度的。也就是说如果我们没有设置项目在交叉轴上的长度话，项目就一直会延伸变长，除非碰到父容器的边界和其他项目为止。
如果我多添加几个项目
结果变成这样了，也就是说如果我们没有设置项目在交叉轴上的长度的话，那么项目的长度会只适应长度。如果设置了固定长度的话，他就会以固定的长度来显示。
如果主轴上没有设置固定宽度，又没有设置flex-basis属性的话，那么项目在主轴上的宽度就会只适应，也就是宽度为项目内容的宽度。
3.我们还可以通过项目的flex-grow属性来设置项目在主轴上是如何分配剩余空间的。