Angular 8 + flex 布局

app.component.html

class="border rounded item">{{item}}                                                 class="border rounded item">{{item}}                                                           class="border rounded item">{{item}}

 

 

Styles.css

/* You can add global styles to this file, and also import other style files */ .body_container {   background-color: coral;   position: absolute;   top: 0;   bottom: 0;   left: 0;   width: 100%;   display: flex;   flex-direction: column;   overflow-y: hidden; } .topbar {   background-color: antiquewhite;   margin: 5px;   padding: 5px;   display: flex;   flex-direction: row;   justify-content: space-between } .topbar .top_left {   padding: 5px;   display: flex;   flex-direction: row;   flex-wrap: wrap; } .topbar .tool_right {   padding: 5px;   display: flex;   flex-direction: row-reverse;   flex-wrap: wrap-reverse; } .nav_content_row {   margin: 5;   /* flex-grow: 1; */   display: flex;   flex-direction: row;   background-color: red;   height: 100%; } .child_body_container {   background-color: greenyellow;   flex-grow: 1;   width: 100%;   height: 100%;   display: flex;   flex-direction: column; } .vert_nav {   background-color: aquamarine;   padding: 5px;   width: 120px;   height: 100%;   flex-grow: 0;   flex-shrink: 0;   overflow-y: auto;   /* for firfox */   min-height: 0; } .vert_section {   margin: 5px;   background-color: blueviolet;   padding: 5px;   flex-grow: 1;   display: flex;   flex-direction: column;   /* for firfox */   min-height: 0; } .vert_scrollable {   margin: 5px;   padding: 5px;   background: yellow;   flex-grow: 1;   overflow-x: hidden;   overflow-y: auto;   /* for Firefox */   min-height: 0;   width: auto; } .center {   justify-content: center } /* test help */ .item {   background-color: cyan;   width: 100px;   height: 50px;   padding: 5px;   margin: 5px; }

 

 

效果1：

上下都可固定显示内容，中间区域根据浏览器尺寸自动出现滚动条

 

fixed top                            class="border rounded item">{{item}}           fixed bottom

 

 

 效果2：

顶部工具栏，自动适应宽度并元素换行。左边菜单栏根据窗口尺寸，自动出现滚动条。右边内容区根据窗口尺寸自动出现滚动条

 

 

class="border rounded item">{{item}}                                                 class="border rounded item">{{item}}                                                           class="border rounded item">{{item}}                                                 class="border rounded item">{{item}}

 

效果3：

多级路由下，多级工具栏多级路由栏。内容部分会根据窗口大小自动生成滚动条。

 

 

class="border rounded item">{{item}}                                                 class="border rounded item">{{item}}                                                           class="border rounded item">{{item}}                               test                                                    class="border rounded item">{{item}}                          test