巧用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
複製代碼

這樣設置能夠把中間的內容層撐開（自適應），從而達到效果。 界面以下：

。