圣杯布局，双飞翼布局，弹性布局实现三栏布局（左右固定中间自适应）

实现三栏水平布局，左右固定中间自适应。

DOM结构

效果图

自实现

在不使用圣杯布局和双飞翼布局时，我的实现方式是：

将container设置相对定位，left和right设置相对定位（设置绝对定位浮动失效：产生BFC），main设置绝对定位

设置left向左浮动，right向右浮动，设置它们宽度和高度

设置main的left为左边栏的kua宽度，right为左边栏的right宽度，设置高度

CSS代码如下：

.container {
      position: relative;
    }
    .left, .main, .right {
       min-height:200px;
    }
    .left {
        position: relative;
        float: left;
        width: 200px;
        background-color: rgb(185, 218, 124);
    }
    .right {
        position: relative;
        float: right;
        width: 300px;
        background-color: rgb(119, 160, 139);
    }
    .main {
        position: absolute;
       left: 200px;
       right: 300px;
       background-color: rgb(187, 117, 146);
       
    } 

圣杯布局

container设置padding: 0 300px 0 200px;为左右栏浮动是留出位置

main，left，right都设置为向左浮动，将main的宽度设置为100%占满container的content区域，此时left和right被挤到下一行

设置left的margin-left为-100%将left移至上一行，再设置left：-200px解决覆盖问题

设置right的margin-left为-300px将right移至上一行，再设置right：-300px解决覆盖问题(这里也可以直接使用margin-right：-100%或者margin-right：-300px)

CSS代码如下：

 .container {
       padding: 0 300px 0 200px;
    }
    .left, .main, .right {
       position: relative;
       float: left;
       min-height: 120px;
    }
    .left {
        left:-200px;
        margin-left: -100%;
        width: 200px;
        background-color: rgb(185, 218, 124);
       
    }
    .right {
        right: -300px;
        margin-left: -300px;
      /*   margin-right: -300px; */
      /*  margin-right: -100%; */
        width: 300px;
        background-color: rgb(119, 160, 139);
       
    }
    .main {
        width: 100%;
        background-color: rgb(187, 117, 146);
       
    } 

双飞翼布局

与圣杯布局有些相似，不同在于双飞翼布局在main中新增一个div，不使用相对定位，设置这个div的margin: 0 300px 0 200px;为左右栏留出位置，将left移至上一行时只使用margin-left：100%，将right移至上一行时只使用margin-right：-300px;

DOM结构

 
　　

    　　
main
 
    
　　
left
 
　　
right
 

CSS代码如下：

   .left, .main, .right {
       float: left;
       min-height: 120px;
       text-align: center;
    }
    .left {
        margin-left: -100%;
        width: 200px;
        background-color: rgb(185, 218, 124);
       
    }
    .right {
        margin-left: -300px;
        width: 300px;
        background-color: rgb(119, 160, 139);
       
    }
    .main {
        width: 100%;
        background-color: rgb(187, 117, 146);
    } 
    .content{
        margin: 0 300px 0 200px;
    } 

弹性布局

使用到的弹性布局的属性：

order属性定义项目的排列顺序，数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间

设置容器container的display：为flex，此时main，left，right作为container的项目从左只有排列

设置项目left的order属性为-1，改变排列位置，设置left和right的flex-basis属性为各自的宽度

设置项目main的放大比例flex-grow为1

CSS代码如下：

   .container {
     display: flex;
     min-height:200px;  
    }
    .left, .main, .right {
       min-height:200px;
    }
    .left {
        order: -1;
        flex-basis: 200px;
        background-color: rgb(185, 218, 124);
    }
    .right {
        flex-basis: 300px;
        background-color: rgb(119, 160, 139);
    }
    .main {
        flex-grow: 1;
       background-color: rgb(187, 117, 146);
       
    }