要实现Angular Flex-layout中的2列全高度或可调整内容,可以使用Flexbox布局和Flex-layout库提供的属性和指令。下面是一个示例代码:
app.component.html:
Left Column
Right Column
app.component.css:
.container {
height: 100vh; /* 设置容器高度为100%视窗高度 */
}
.left-column,
.right-column {
display: flex;
align-items: stretch; /* 设置子项的高度与容器一致 */
}
.content {
flex: 1; /* 设置内容填充整个子项空间 */
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
上述代码使用fxLayout指令设置容器为行布局,并使用fxFlex指令将左右两个列的宽度设置为50%。通过设置容器的高度为100%视窗高度,左右两列的高度将自动填充满整个容器。每个列中的内容使用flex属性将其设置为填充整个列的空间。
你可以根据需要调整左右两列的宽度和容器的高度,并在内容中添加自己的样式和布局。