圣杯布局是一种比较经典的布局方案。目前各大商城首页都采取该布局方案。目前有两种实现方式比较流行，分别是传统的css+div的布局方案以及由css3的flex特性实现的更简洁的布局方案。两种方案各有优缺点，那么，让我们看看具体的实现吧。
传统的css+div实现方式
传统模式的基本原理为：利用容器元素的padding偏移和子元素的浮动和margin偏移特性实现圣杯布局。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
padding-left: 200px;/*设置容器内边距的左侧偏移量，为左侧边栏腾出显示空间，大小和左侧边栏宽度一致。*/
padding-right: 150px;/*设置容器内边距的右侧偏移量，为右侧边栏腾出显示空间，大小和左侧边栏宽度一致。*/
}
#container .column {
float: left;/*容器的所有子元素都进行左浮动*/
height: 400px;
}
#header {
background-color: grey;
}
#center {
width: 100%;/*主内容区，为相对大小，会根据屏幕宽度自动调整自身大小*/
background-color: green;
}
#left {
width: 200px;
margin-left: -100%;/*浮动之后，向左偏移整个父容器宽度的长度，这样使left能够越过center，排在center前面*/
position: relative;
right: 200px;/*相对父容器右移自身长度，占据父容器腾出的左侧边栏空间*/
background-color: red;
}
#right {
width: 150px;
margin-right: -150px;/*向左移动自身长度，占据父容器腾出的右侧边栏空间*/
background-color: yellow;
}
#footer {
clear: both;/*清除浮动影响*/
background-color: grey;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
<div id="center" class="column">content</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
关于圣杯布局有以下细节需要注意：center元素必须排在left和right之前。原因在于center元素为主内容区。由于通常的商城首页需要加载的内容都比较多，我们希望在网络较为极端的情况下，优先显示主内容区。
基于Flex弹性布局的圣杯布局
弹性布局由于其特性，在实现圣杯布局是非常简单，代码可读性更好。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
display: flex;/*设置弹性布局容器*/
}
#header, #footer {
background-color: grey;
}
#center {
flex: 1;/*设置弹性伸缩比，1表示1：1的伸缩比*/
background-color: red;
height: 400px;
}
#left {
flex: 0 0 300px;/*前两个参数设置元素为不能伸缩，后一个参数设置一个固定的初始值*/
order: -1;/*元素排序向左移动一位，排在center前面*/
height: 400px;
background-color: yellow;
}
#right {
flex: 0 0 200px;/*前两个参数设置元素为不能伸缩，后一个参数设置一个固定的初始值*/
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
以上的注释行是关键代码。需要注意的细节是，left元素的oder：-1属性实现元素排序往左移动一位，以达到元素在center渲染完之后渲染，却显示在center元素之前的效果。该效果在极端网络条件下就能体现出来。
两种方式的优缺点
可以看到，传统的圣杯布局采用的是css+div的布局方式，在实现细节上主要利于padding，margin，float等一些偏移属性。这些属性是非常常规的属性，在各浏览器的表现都非常一致，因此这种方式的兼容性非常好。在不同内核的浏览器之间，以及桌面和移动设备的表现上都非常一致。即使在IE6，IE5这样的古老浏览器上也能完美的呈现效果。缺点是代码可读性不太好，它采用了一些不太常规的偏移操作，容易让人产生困惑。
flex的实现方式可读性好，代码简单。但是，flex是css3.0的新特性。对于移动端来说，各大浏览器基本都支持css3.0，但是桌面环境就比较复杂。仍然有一些老项目运行在IE6上，这样就会造成兼容性问题。那么比较推荐的做法是：如果项目只针对移动端，就采用flex布局，如果桌面端和移动端都要兼顾，就采用传统布局。由于弹性布局是css的新特性，下面我们来看一下弹性布局给我们提供了哪些操作空间。
弹性布局
弹性布局依赖主轴和交叉。我们一般地可以将主轴和交叉轴比作x轴和y轴，但如果项目需要，我们也可以将主轴设置为纵轴，这样主轴就相当于y轴，而交叉轴就相当于x轴了。或许另一种比喻更为恰当，将主轴视为布局轴，交叉轴视为对齐轴。即主轴表示元素的排列方向，交叉轴表示元素的对齐方向。关于弹性布局，它包括容器属性和项目属性，一共12个属性。其中容器属性作用于容器中的所有项目，起到一个整体布局的作用，项目属性作用于容器中具体的子元素，起到一个细节调整的作用。掌握这些属性的用法，就掌握了弹性布局。
容器属性如下：
flex-direction /*设置主轴方向，可以设置横向和纵向，默认为横向*/
flex-wrap /*设置当主轴方向空间不足时，是否换行*/
flex-flow /*flex-direction，flex-wrap的简写形式*/
justify-content/*设置主轴对齐方式，取值范围：flex-start | flex-end | center | space-between | space-around*/
align-items /*交叉轴对齐方式，取值范围：flex-start | flex-end | center | baseline | stretch*/
align-content /*主轴间的对齐方式，取值范围：lex-start | flex-end | center | baseline | stretch*/
项目属性如下：
order //元素在容器中的排列顺序，越小越靠前，默认为0
flex-grow //元素在容器中的放大比例，在没有剩余空间或设置为的情况下，不放大。默认值为0
flex-shrink //元素在容器中的缩小比例，当空间不足时，元素将等比缩小，默认为1，如果设置为0，则不缩小
flex-basis //设置一个固定空间，浏览器根据固定空间可以计算出剩余空间，默认值为auto
flex //flex-grow，flex-shrink，flex-basis的简写模式
align-self //单独定义自身的对齐方式，覆盖容器的align-items属性
好了，就到这里吧，希望你有所收获。晚安。。。
网友评论