实现两列的弹性布局

需求：

 在一个大div内有两个div，横向排列，要求两个div正好占满一行且左边的宽度不固定。如下：

 

   

宽度不固定

   

占满剩余空间

---

思路：

传统的设计方案显然不能满足需求，我们需要右边的元素能自动填充剩余的空间，所以考虑可以自由填充的元素或属性，div可以充满父元素，flex布局大有可为。自己试验以及通过上网查找总结三种办法，记录以备查漏补缺。

---

解决办法1：

  .con{  

        width:1000px;

        height:400px

    }  

    .left{  

        width:200px;

        height:100%;

        float: left;  

    }  

    .right{  

        overflow:hidden;  /* 触发bfc */  

    }  

说明：

设计方案用到了bfc的原理，如果不触发bfc左边的元素会浮在右边的元素上，同时右边占满整个空间，显然不是我们需要的，右边元素触发bfc后不允许浮动元素覆盖在上方，所以收缩空间只占据剩余空间。

---

解决方案2：

 .con{  

        width:1000px;

        height:400px;

        display:flex;         /*flex布局*/  

    }  

    .left{  

        width:200px; 

        height:100%;

        flex:none; 

    }  

    .right{  

        height:100%;

        flex:1;        /*flex布局*/  

    }  

说明：

这个布局涉及到了css3的弹性布局，也就是flex布局，flex属性是多个属性的简写模式，包含是否允许缩放，以及占据多少主轴空间,当设置为none是的含义是不允许缩放（横向），并且占据元素本身大小的主轴空间，右边的元素就很简单了，占据剩余的所有主轴空间。

---

解决方案3：

 .con{  

        width:1000px;

        height:400px;

        display:table;         /*table布局*/  

    }  

    .left{  

        width:200px;

         height:100%;

        display:table-cell;  

    }  

    .right{  

        height:100%;

        display: table-cell;  

    }  

说明：

display的table-cell属性我们接触的并不多，但是它确实能解决我们今天讨论的这个问题，如果设置为table-cell，元素将按照表格单元的形式布局，我们用到过表格，它具有伸缩单元格以适应布局的特点，两行或者三行都能正好占满设定的table宽度，利用这个特性很简便的实现我们想要的效果，但是切记这个属性是依赖table环境的，换言之要有个display设定为table的父元素。