flex实现三栏布局

flex实现三栏布局，两边固定，中间宽度自适应

效果图

html部分

<div class="outer">
    <div class="right"></div>
    <div class="center"></div>
    <div class="left"></div>
</div>

CSS部分

.outer{
    display: flex;
    height: 100%;
    width: 100%;
}
.right{
  width: 300px;
  background-color: red;
  height: 300px;
}
.center{
flex: 1;
background-color: yellow;
height: 300px;
}
.left{
    width: 300px;
    height: 300px;
    background-color: blueviolet;
}

利用flex实现三栏布局非常简单