巧用flex搭建後臺系統架子

NO IMAGE

由於我覺得還不錯就分享了出來,樣式就直接粗暴點,內嵌了。

<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

這樣設置可以把中間的內容層撐開(自適應),從而達到效果。
界面如下:

巧用flex搭建後臺系統架子

相關文章

藉助系統自帶圖片裁剪集成圖片選擇以及7.0適配

面試題整理—CSS部分

前端面試題—vue部分詳解

快速使用vuex