我正在学习Angular，当我尝试在body上使用flexx时，它似乎不起作用，但在其他元素上使用它是有效的。例如，我想做一个简单的计数器应用程序，我想把所有东西居中，但它似乎不起作用。
我在谷歌上搜索，我所能看到的是人们使用Angular Flex-Layout，所以这是我需要使用的还是我错过了什么?
app.component.html
<div class="content">
<h2 class="counter">{{num}}</h2>
<button class="btn" (click)="increment($event)">+</button>
<button class="btn" (click)="decrement($event)">-</button>
</div>
app.component.css
body {
display: flex;
align-content: center;
}
.content {
display: flex;
}
构建后的HTML
<body>
<app-root>
<!-- HTML Code of your component -->
</app-root>
</body>
所以你少了一步。
在你的app.component.scss文件中:
:host {
height: 100%;
display: flex;
align-content: center;
}
.content {
display: flex;
}
组件CSS文件是有作用域的这意味着它们只适用于组件中的元素(在你的例子中是app.component.html)
https://angular.io/guide/component-styles
如果你想在组件外部编写样式，你可以使用全局样式表，例如src/styles.css，在angular.json中定义。它们的工作方式就像普通的css
external-and-global-style-files
尝试添加justify-content和align-items以使内容对齐到中心。您还需要设置html和body元素的height和min-height。
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
文档在这里。
align-items属性使项目在横轴上对齐。
justify-content使项目在主轴上对齐。