纯css写三联列

最近翻看了之前的一些面经，发现之前的一些问题并没有得到根本的解决，赶紧补习一下；

这里我介绍两种方法：

1. 最推荐的一种，也是自己用的比较多的一种方法  flex布局法：首先在总的父级元素上设置一个display: flex;属性。然后给定左右两个元素的宽高，中间元素设置flex:1;这样就可以完美实现自适应三联列（里面的三个div分别是左 中 右）

    <!-- 1.利用flex 父级元素设置display: flex;  中间元素设置flex:1; -->
    <div class="allblock" style="display: flex; width: 100%;height: auto; ">
        <div style="width: 200px;height: 500px;background-color: red;">1</div>
        <div style="flex: 1;background-color: yellow;">2</div>
        <div style="width: 200px;height: 500px;background-color:red ;">3</div>
    </div>

这种方法的缺点除了对于古老的浏览器有一些兼容性的问题以外，没有任何缺点  代码简单