admin-ui distribution

distribution.html:

fxLayout　　FlexBox 容器 　　https://blog.poychang.net/use-angular-flex-layout-package/

容器类：

fxLayout 控制容器內子元素的排版方向： row 从左到再从上到下，column 从上到下再从左到右，wrap 多行，row-reverse，column-reverse    <div fxLayout="row" fxLayout.xs="column"> </div>

fxLayoutGap 控制容器內子元素的間隔  <div fxLayoutGap="10px"> </div>

fxLayoutAlign  控制容器內子元素的對齊方式   主轴排列main-aixs：start、center、end、space-around、space-between  cross-axis: start、center、end、stretch  <div fxLayoutAlign="start stretch"> </div>

子元素类：

fxFlex 控制子元素大小： %、px、vw、vh     　　 fxFlex=“90”   fxFlex="10" 分别占比

 

 

mat-sidenav-container　　侧边栏 

mat-sidenav 侧边栏的附属内容，最多两个，position左到右为start-end，

mat-sidenav-content  侧边栏的主体内容，如果没有指定，则除附属内容外的全部都被放入隐式创建的范围之中

 

mat-form-field  表单字段

appearance  输入框的样式，legacy，standard，fill，outline　　appearance="outline" 四周有黑色边框

 

mat-spinner  加载圈

 

table  表格

matSort 排序，table里写matSort   再给要排序的表头添加 mat-sort-header