Css 嵌套fxLayout容器的良好实践？

我最近第一次开始使用angular/flex，但不确定布局容器嵌套。在下面的代码中，导航标记是一个角度材质sidenav，它在左侧打开，然后将其余内容推到右侧。我注意到在这一点上（当我刚开始时，它不是这样的），sidenav似乎有点滞后，最近当我打开/关闭它。它在动画进行到一半时冻结几秒钟，然后完全打开/关闭。我将列和多行fxLayout容器嵌套在一行fxLayout容器中，并认为这可能是sidenav动画性能问题的原因？我是否因为嵌套了所有这些容器而使事情变得过于复杂，从而导致性能问题

我的代码：

<div fxLayout fxAlign="start start">
    <mat-toolbar color="primary">
        <button mat-icon-button (click)="toggleSidenav()">
            <mat-icon aria-label="menu">
                <i class="material-icons">restaurant_menu</i>
            </mat-icon>
        </button>
        <span>POC Toolbar</span>            
        <span class="fill-remaining-space"></span>
        <div class="rhs">
            <mat-icon class="rhs-icon fa fa-home fa-lg"></mat-icon>
            <span class="rhs-item">Home</span>  

            <mat-icon class="rhs-icon fa fa-sign-out fa-lg" aria-hidden="true"></mat-icon>
            <span class="rhs-item">Logout</span>

            <mat-icon class="rhs-icon fa fa-key fa-lg"></mat-icon>
            <span class="rhs-item">Password</span>

            <mat-icon class="rhs-icon fa fa-sitemap fa-lg"></mat-icon>
            <span class="rhs-item">Site map</span>          
        </div>  
    </mat-toolbar>
</div>

<div fxLayout="row"  fxLayoutAlign="start" fxLayoutGap="20px">
    <div fxFlex>
        <navigation [state]="showMenu"></navigation>
    </div>

    <div fxFlex="100%">
        <div fxLayout="column" fxLayoutGap="20px">
            <div>
                <h1>Dashboard</h1>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, eum iuvaret delicata at. Eu postea commodo persius mei. Id est semper constituto, ignota aperiri adversarium ne vix. Id est impetus suscipit, nulla meliore epicuri id eos. Ad pro modo albucius atomorum. At mel ullum libris debitis, in vero apeirian mediocrem mei.</p>
            </div>
            <div>
                <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
            </div>
            <div>
                <h2>Sample Angular/Flex Column Layout</h2>
            </div>
        </div>
        <div fxLayout fxLayoutGap="15px">
            <div fxFlex="33%">              
                    <h3>Notes</h3>
                    <ul>
                        <li>we're using responsive css &amp; Angular(Angular-material &amp; Angular/flex) This allows us to show (or hide) things like the left menu and the number of columns displayed by dataTables.</li>
                        <li>The amount of "Custom" css we've used is actually very little, prefering rather to make use of the framework's built in features.</li>
                        <li>Angular reactive forms and validators should probably replace the generic php form.</li>
                        <li>No server side php is used.</li>
                    </ul>
            </div>
            <div fxFlex="33%">
                <h3>Example views</h3>
                <ul>
                    <li><a href="#">Login Screen</a></li>
                    <li><a href="#">Home Page</a> &raquo; Ledger system &raquo; Sales ledger &raquo; Customer master files</li>
                    <li><a href="#">Customer Master Search</a></li>
                    <li><a href="#">Customer Master List</a></li>
                    <li><a href="#">detail Customer Master</a></li>
                    <li><a href="#">update Customer Master</a></li>
                    <li><a href="#">detail Account</a> - Click on suburb <i class="fa fa-info-circle"></i></li>
                    <li><a href="#">Lookup Screen(Generic)</a> - Click on suburb <i class="fa fa-search"></i></li>
                </ul>
            </div>
            <div fxFlex="33%">
                <h3>Keyboard Shortcuts</h3>
                <ul>
                    <li><Ctrl + b: Go back/li>
                    <li>Ctrl + i: Launch info</li>
                    <li>Ctrl + h: Launch help</li>
                    <li>Ctrl + l: Show or hide menu</li>
                    <li>Ctrl + n: Add new item</li>
                    <li>Ctrl + p: Print</li>
                    <li>Ctrl + r: reload table data</li>
                    <li>Ctrl + <em>any other</em> page specific function you ned</li>
                </ul>
            </div>
        </div>
    </div>
</div>

my navigation component html:


<mat-sidenav-container position="start" class="custom-sidenav-container">

    <mat-sidenav #sidenav mode="side" opened="false">
        Navigation
        <ul class="sn-list">
            <li>                    
                <mat-icon class="sn-item">
                    <i class="material-icons">dashboard</i>
                </mat-icon>
                <a class="sn-item" href="#">Dashboard</a>       
            </li>
            <li>

                <mat-icon class="sn-item">
                    <i class="material-icons">archive</i>
                </mat-icon>             
                <span class="sn-item" [matMenuTriggerFor]="stockSystemMenu">Stok System</span>

                <mat-menu [overlapTrigger]="false" #stockSystemMenu="matMenu">
                    <button mat-menu-item>
                        <mat-icon class="sn-item">
                            <i class="material-icons">chevron_right</i>
                        </mat-icon>
                        <span class="sn-item">Service 1</span>
                    </button>
                    <button mat-menu-item>
                        <mat-icon class="sn-item">
                            <i class="material-icons">chevron_right</i>
                        </mat-icon>
                        <span class="sn-item">Service 2</span>
                    </button>
                    <button mat-menu-item>
                        <mat-icon class="sn-item">
                            <i class="material-icons">chevron_right</i>
                        </mat-icon>
                        <span class="sn-item">Service 3</span>
                    </button>
                </mat-menu>
            </li>           
            <li>
                <mat-icon class="sn-item">
                    <i class="material-icons">shopping_cart</i>
                </mat-icon>
                <span class="sn-item" [matMenuTriggerFor]="salesMenu">Sales / Purchases</span>
                <mat-menu [overlapTrigger]="false" #salesMenu="matMenu">
                    <button mat-menu-item>
                        <mat-icon class="sn-item">
                            <i class="material-icons">chevron_right</i>
                        </mat-icon>
                        <span class="sn-item">Service 1</span>
                    </button>
                    <button mat-menu-item>
                        <mat-icon class="sn-item">
                            <i class="material-icons">chevron_right</i>
                        </mat-icon>
                        <span class="sn-item">Service 2</span>
                    </button>
                    <button mat-menu-item>
                        <mat-icon class="sn-item">
                            <i class="material-icons">chevron_right</i>
                        </mat-icon>
                        <span class="sn-item">Service 3</span>
                    </button>
                </mat-menu>         
            </li>       </ul>
    </mat-sidenav>
    <div class="sn-content">    
    </div>
</mat-sidenav-container>

餐厅菜单
POC工具栏
家
注销
密码
站点地图
仪表板
这是一个很好的例子。欧盟邮政商品。我是一名宪法制定者，他是一名反对者。这是一种动力，没有更好的动力。阿尔布西火山的前现代建筑。在mel ullum libris debitis，在vero apeirian mediocrem mei

莫利斯夫妇，最不常见的luctus夫妇，最不常见的ligula夫妇，最不常见的是lacinia-odio-sem-nec-elit夫妇。在发酵罐中发酵。福斯·达皮布斯、泰勒斯·阿库斯·康莫多、托托·莫里斯调味品尼布

角度/柔性柱布局示例
笔记

我们正在使用响应式css&；Angular（Angular material&；Angular/flex）这允许我们显示（或隐藏）左侧菜单和dataTables显示的列数
我们使用的“定制”css实际上很少，更倾向于使用框架的内置功能
角度反应式表单和验证器可能会取代通用php表单
没有使用服务器端php

示例视图


"；分类账系统»；销售分类账»；客户主文件




-点击郊区
-点击郊区

键盘快捷键


Ctrl+i:启动信息
Ctrl+h:启动帮助
Ctrl+l：显示或隐藏菜单
Ctrl+n：添加新项目
Ctrl+p：打印
Ctrl+r：重新加载表数据
Ctrl+您指定的任何其他页面特定功能

我的导航组件html：
航行


仪表板


档案文件
斯托克系统
雪佛龙右
服务1
雪佛龙右
服务2
雪佛龙右
服务3


购物车
销售/购买
雪佛龙右
服务1
雪佛龙右
服务2
雪佛龙右
服务3

通常将相关的主要内容包装在

mat sidenav容器中

这一部分有一些例子

---

在您的情况下，您发布的所有视图代码，或者可能只是您的仪表板代码，都应该包含在

mat sidenav容器中

我无法判断您是否已经在导航标签中执行此操作，但我建议使用material sidenav组件我正在使用material sidenav组件。我对fxLayout的使用看起来可以/可以接受吗？在大多数情况下看起来是这样的。正在尝试设置第一个

div

的子元素的样式吗？如果是这样，则应改用

fxLayoutAlign

。至于sidenav渲染问题，您还需要发布导航组件的代码。你可能会被解雇