displsy:flex 实现三栏布局的方法，左右定宽，中间自适

1. 首先定义html结构，因为中间内容要优先加载所以结构不能改变，需要这样定义

      <div class="container">
            <div class="main">main</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>

2. 定义css样式，给父盒子一个display:flex，left和right给固定的宽度，main来个flex：1自适应，当然最重要的是给left一个 order ：-1

| order | 设置弹性盒子的子元素排列顺序。 | 数值小的排在前面

.container{
    background-color: black;
    border: 1px solid #ccc;
    height: 300px;
    min-width: 800px;
    display: flex;
    .main{
        background-color: green;
        height: 300px;
        flex: 1 // 重点
    };
    .left{
        background-color: red;
        width: 200px;
        height: 300px;
        order: -1;  // 重点
    };
    .right{
        background-color: blue;
        width: 200px;
        height: 300px;
    }
}

3. 实现的效果