FlexBox 的内联 fxFlex 既不会增长 children 来匹配容器,也不会对齐 children
Inline fxFlex for FlexBox neither growing children to match container, nor aligning children
我正在尝试使用内联 fxFlex 和 fxLayoutAlign 在 Node.js Angular 中使用 FlexBox 创建一个简单的 HTML 结构。主要问题是 fxFlex 没有拉伸元素以匹配容器,fxLayoutAlign 没有为 children 提供正确的布局。也许这两个问题是相关的。
我有一套组件,代码见下。仪表板组件目前的布局有 3 children。然而,children 不会拉伸以适合容器。此外,我无法使用 fxLayoutAlign 将 children 与 space-between 对齐。 header 组件也有 fxLayoutAlign,在这里它工作得很好。
仪表板的 children 之一是另一个组件,称为 quest-list。该组件包含一个“任务”列表,其大小可能会有所不同,这会导致容器可滚动并溢出。但是,除非我以像素为单位指定 quest-list 的确切高度,否则它不会伸展以适应任何 children.
Stackblitz of the problem here
到目前为止,我的代码包含以下组件(使用 Angular Material,用于编码时的一些视觉反馈):
main-page.component.html:
<div fxLayout="column" fxFlex="100" fxLayoutGap="10px" class="main-container">
<header></header>
<dashboard fxFlex="grow"></dashboard>
</div>
header.html:
<mat-toolbar fxFlex fxLayoutAlign="space-between center" fxLayout="row" class="mat-elevation-z1" fxLayoutGap="20px">
<div fxFlex="nogrow">
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
<button mat-menu-item *ngFor="let button of buttons" (click)="navigate(button.link)">
<mat-icon>{{button.icon}}</mat-icon>
<span>{{button.text}}</span>
</button>
</mat-menu>
</div>
<div fxLayout="row" fxFlex=nogrow fxLayoutGap="10px" fxLayoutAlign=" center">
<div fxFlex>Username</div>
<mat-icon fxFlex>account_circle</mat-icon>
</div>
</mat-toolbar>
仪表板。component.html:
<div fxFlex="grow" fxLayout="column" *ngIf="loading==false" fxLayoutGap="20px" fxLayoutAlign="space-between center">
<div fxFlex>
{{getNameWithTitle()}}
</div>
<div fxFlex>
{{getLevelWithCharacter()}}
</div>
<quest-list fxFlex
class="quest-list"
title="Quests"
[quests]="quests"
[showOnlyUserQuests]="true">
</quest-list>
</div>
quest-list.component.html:
<mat-card fxFlex fxLayout="column" fxLayoutGap="20px" fxLayoutAlign=" center" class="quest-list-container">
<div class="title" fxFlex="nogrow">
{{title}}
</div>
<div fxFlex fxLayout="column" fxLayoutGap="10px" class="overflow-container">
<mat-accordion *ngFor="let quest of quests">
<mat-expansion-panel hideToggle>
<mat-expansion-panel-header>
<mat-panel-title fxFlex="nogrow">
<img *ngIf="quest.skill.image" [src]="quest.skill.image.image">
<mat-icon *ngIf="!quest.skill.image" fxFlex>not_interested</mat-icon>
</mat-panel-title>
<mat-panel-description fxFlex fxLayoutAlign="space-between center">
{{quest.name}}
<mat-icon>arrow_right</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
<p fxFlex>
{{quest.description}}
</p>
</mat-expansion-panel>
</mat-accordion>
</div>
</mat-card>
quest-list-component.scss:
.quest-list-container {
background-color: lightskyblue;
}
.overflow-container {
overflow-y: scroll;
}
问题图片:
Without pixel height
With fxFlex="600px for <quest-list>
(使用全局样式:@import '~@angular/material/prebuilt-themes/indigo-pink.css';
我发现这个问题非常令人沮丧,因为我确信解决方案非常简单。但由于我现在已经花了几个小时查看它,仍然看不出问题所在,我希望这里有人能提供帮助。
提前致谢。
问题是,如果您只是在 overflow-container
上使用 fxFlex
,它将添加一种样式:flex: 1 1 0.0000001%
,结合您的 overflow-scroll 这将导致容器折叠到尽可能小的尺寸。如果将其更改为 fxFlex="auto"
,它看起来会好一些。
但是,我想这不是您想要的全部。我猜你希望它只滚动内部区域,而不是整个页面。这也需要相当多的改变。从 body 元素开始,父元素上有很多 height: 100%
。几个元素上的一对 min-height: 0
,将 fxFlex
指令设置为 auto
并删除 .main-container
上的 fxFlex="100"
。因为,如果您向元素添加 fxFlex
,父元素将自动附加 display: flex
,即使那不是我们想要的。
我做了一个完全可用的 stackblitz here
就我个人而言,我已经放弃了 angular 中的 fxLayout 包。使用这个包时你会做出一定的速度牺牲,在 99% 的情况下你可以只使用一些实用程序 类。对于剩下的 1%,您可以使用其他方式。
我正在尝试使用内联 fxFlex 和 fxLayoutAlign 在 Node.js Angular 中使用 FlexBox 创建一个简单的 HTML 结构。主要问题是 fxFlex 没有拉伸元素以匹配容器,fxLayoutAlign 没有为 children 提供正确的布局。也许这两个问题是相关的。
我有一套组件,代码见下。仪表板组件目前的布局有 3 children。然而,children 不会拉伸以适合容器。此外,我无法使用 fxLayoutAlign 将 children 与 space-between 对齐。 header 组件也有 fxLayoutAlign,在这里它工作得很好。
仪表板的 children 之一是另一个组件,称为 quest-list。该组件包含一个“任务”列表,其大小可能会有所不同,这会导致容器可滚动并溢出。但是,除非我以像素为单位指定 quest-list 的确切高度,否则它不会伸展以适应任何 children.
Stackblitz of the problem here
到目前为止,我的代码包含以下组件(使用 Angular Material,用于编码时的一些视觉反馈):
main-page.component.html:
<div fxLayout="column" fxFlex="100" fxLayoutGap="10px" class="main-container">
<header></header>
<dashboard fxFlex="grow"></dashboard>
</div>
header.html:
<mat-toolbar fxFlex fxLayoutAlign="space-between center" fxLayout="row" class="mat-elevation-z1" fxLayoutGap="20px">
<div fxFlex="nogrow">
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
<button mat-menu-item *ngFor="let button of buttons" (click)="navigate(button.link)">
<mat-icon>{{button.icon}}</mat-icon>
<span>{{button.text}}</span>
</button>
</mat-menu>
</div>
<div fxLayout="row" fxFlex=nogrow fxLayoutGap="10px" fxLayoutAlign=" center">
<div fxFlex>Username</div>
<mat-icon fxFlex>account_circle</mat-icon>
</div>
</mat-toolbar>
仪表板。component.html:
<div fxFlex="grow" fxLayout="column" *ngIf="loading==false" fxLayoutGap="20px" fxLayoutAlign="space-between center">
<div fxFlex>
{{getNameWithTitle()}}
</div>
<div fxFlex>
{{getLevelWithCharacter()}}
</div>
<quest-list fxFlex
class="quest-list"
title="Quests"
[quests]="quests"
[showOnlyUserQuests]="true">
</quest-list>
</div>
quest-list.component.html:
<mat-card fxFlex fxLayout="column" fxLayoutGap="20px" fxLayoutAlign=" center" class="quest-list-container">
<div class="title" fxFlex="nogrow">
{{title}}
</div>
<div fxFlex fxLayout="column" fxLayoutGap="10px" class="overflow-container">
<mat-accordion *ngFor="let quest of quests">
<mat-expansion-panel hideToggle>
<mat-expansion-panel-header>
<mat-panel-title fxFlex="nogrow">
<img *ngIf="quest.skill.image" [src]="quest.skill.image.image">
<mat-icon *ngIf="!quest.skill.image" fxFlex>not_interested</mat-icon>
</mat-panel-title>
<mat-panel-description fxFlex fxLayoutAlign="space-between center">
{{quest.name}}
<mat-icon>arrow_right</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
<p fxFlex>
{{quest.description}}
</p>
</mat-expansion-panel>
</mat-accordion>
</div>
</mat-card>
quest-list-component.scss:
.quest-list-container {
background-color: lightskyblue;
}
.overflow-container {
overflow-y: scroll;
}
问题图片:
Without pixel height
With fxFlex="600px for <quest-list>
(使用全局样式:@import '~@angular/material/prebuilt-themes/indigo-pink.css';
我发现这个问题非常令人沮丧,因为我确信解决方案非常简单。但由于我现在已经花了几个小时查看它,仍然看不出问题所在,我希望这里有人能提供帮助。
提前致谢。
问题是,如果您只是在 overflow-container
上使用 fxFlex
,它将添加一种样式:flex: 1 1 0.0000001%
,结合您的 overflow-scroll 这将导致容器折叠到尽可能小的尺寸。如果将其更改为 fxFlex="auto"
,它看起来会好一些。
但是,我想这不是您想要的全部。我猜你希望它只滚动内部区域,而不是整个页面。这也需要相当多的改变。从 body 元素开始,父元素上有很多 height: 100%
。几个元素上的一对 min-height: 0
,将 fxFlex
指令设置为 auto
并删除 .main-container
上的 fxFlex="100"
。因为,如果您向元素添加 fxFlex
,父元素将自动附加 display: flex
,即使那不是我们想要的。
我做了一个完全可用的 stackblitz here
就我个人而言,我已经放弃了 angular 中的 fxLayout 包。使用这个包时你会做出一定的速度牺牲,在 99% 的情况下你可以只使用一些实用程序 类。对于剩下的 1%,您可以使用其他方式。