CSS三栏布局

CSS三栏布局——圣杯布局、双飞翼布局和flex布局

目的：

圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染

区别：

• 圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div
• 双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置
• flex布局：使用flex-basis属性预定义左右两栏宽度，通过flex-grow属性定义中间栏放大程度，通过order属性定义排布顺序

实现：

圣杯布局

<header>header</header>
<div class="main clear-fix">
    <!-- 把中间栏放置最前以达到优先渲染 -->
    <div class="center">中间栏</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
<div class="bottom">bottom</div>

* {
    color: #fff;
}
header {
    background-color: blue;
}
.main {
    background-color: orange;
    padding: 0 100px;		/* 左右两边的padding来放置left和right区域 */
}
.left,.center,.right {
    float: left;
}
.center {
    background-color: purple;
    width: 100%;		/* 这会把left和right挤到下一行 */
}
.left {
    background-color: red;
    width: 100px;
    margin-left: -100%;		/* 把left移动到和center同一行并且左边对齐 */
    position: relative;
    left: -100px;		/* 再向左移动到main的padding区域,就不会挡住center了 */
}
.right {
    background-color: grey;
    width: 100px;
    margin-left: -100px;		/* 把left移动到和center同一行并且右边对齐 */
    position: relative;
    left: 100px;		/* 向右移动到右边的padding区域*/
}
footer {
    background-color: pink;
}
/* 清除浮动 */
.clear-fix::after {
    content: "";
    display: block;
    clear: both;		/* 清除footer上面元素的浮动 */
}

双飞翼布局

  <header>header</header>
  <div class="center_box">
    <div class="center">中间栏</div>
  </div>
  <div class="left">左边栏</div>
  <div class="right">右边栏</div>
  <div class="footer">bottom</div> 

* {
    color: #fff;
}
header {
    background-color: blue;
}
.left,.center,.right {
    float: left;
}
/* 用div把主内容包起来之后,主内容就可使用margin空出两边的区域了 */
.center_box {
    width: 100%;
    background-color: purple;
}
.center {
    margin: 0 100px;	/* 左右两边的margin来放置left和right区域 */
}
.left {
    width: 100px;
    background-color: red;
    margin-left: -100%; 
}
.right {
    width: 100px;
    background-color: grey;
    margin-left: -100px;
}
.footer {
    background-color: pink;
    clear: both; 
}

flex布局

  <header>header</header>
  <div class="main">
    <div class="center">中间栏</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
  </div>
  <footer>footer</footer>

* {
    color: #fff;
}
header {
    background-color: blue;
}
.main {
    display: flex;
}
.center {
    background-color: purple;
    flex-grow: 1;
}
.left {
    background-color: red;
    /* 因为中间和右边order为0，所以按照HTML内放置顺序，中间栏在右边栏左边，因为左边栏order为-1，所以在中间和右边栏的左边 */
    order: -1;		
    flex: 0 0 100px;
}
.right {
    background-color: green;
    flex: 0 0 100px;
}
footer {
    background-color: pink;
}