巧用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
复制代码

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

。