使用flex的order实现中间内容优先渲染的三栏布局

要求：垂直三栏，左、右固定中间自适应，中间优先渲染。

中间先渲染，html中把中间部分写前面。大致就是用order标记，left那块标记为0，center那块标记为1，right那块标记为2

        <div class="center">
            center---------------主要内容部分-------------------------------------
        </div>
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>

css部分

        <style type="text/css">
            body {
                display: flex;
            }
            .left {
                width: 200px;
                background-color: #FF6347;
                flex-shrink: 0;
                order: 0;
            }

            .right {
                width: 200px;
                background-color: #FF6347;
                flex-shrink: 0;
                order: 2;
            }

            .center {
                order: 1;
                background-color: #ccc;
                width: 100%;
            }
        </style>

 

 

最后的效果