巧用flex搭建后台系统架子由于我觉得还不错就分享了出来，样式就直接粗暴点，内嵌了。主要用到就是flex的垂直分布，不

由于我觉得还不错就分享了出来，样式就直接粗暴点，内嵌了。

<div style={{display:"flex",flexDirection:"column",height:'100%'}}>
    <div style={{background:"red",height:'60px'}}>top</div>
    <div style={{background:"white",display:"flex",flex:1,overflowY:"auto"}}>
        <div style={{background:"black",width:"230px",color:"white",overflowY:"auto"}}>
            leftContent
        </div>
    <div style={{overflowY:"auto"}}>
        rightContent
    </div>
    </div>
    <div style={{background:"yellow",height:'60px'}}>bottom</div>
</div>

主要用到就是flex的垂直分布，不清楚的可以去查询一下flex布局。

核心点在于中间层次的样式

 flex：1

这样设置可以把中间的内容层撑开（自适应），从而达到效果。界面如下：

。