angular学习笔记：2-2UI整体布局-总结

命令：

1. ng g c core/header --spec=false
2. ng g c core/footer --spec=false
3. ng g c core/sidebar --spec=false

样式（flex）：

1. 全局样式：src/style.scss
   1. 父级html,body,app-root,.site(父级div,包着header,footer组件的div)全部撑满屏幕：width:100%;height:100%;margin:0;
2. .site设置flex布局

   html,body,app-root,.site{
       width:100%;
       height:100%;
       margin:0;
   }
   .site{
     display: flex;
     flex-direction: column;//纵向按列排；row：横向;只对直接子元素生效
   }
   main{
     flex: 1 0 auto;//放大倍数 缩小倍数 基线宽高(取决于row，column排列方式)
     display: flex;
     flex-direction: row;
     flex-wrap: wrap；//折行；换行；横向放不下的元素换行
     justify-content: flex-start;//（横轴方向）默认； flex-end：子级标签效果右对齐排列；center：水平居中对齐；space-around：横向剩余空白空间平均分配到每个子级元素周围；space-between：两边对齐分配空白
     align-content: flex-start;//（纵轴方向）靠顶部；flex-end：靠底部；center：垂直对齐；stretch：默认值；space-around：纵向平均分布空白空间；space-between：顶部底部对齐分配空白空间
     align-items: center;//每行的元素在纵轴方向垂直居中
   }