时间戳

首页 > 解决方案 > 用于 FlexBox 的内联 fxFlex 既不会让子代匹配容器，也不会对齐子代

html - 用于 FlexBox 的内联 fxFlex 既不会让子代匹配容器，也不会对齐子代

问题描述

我正在尝试使用内联 fxFlex 和 fxLayoutAlign 在 Node.js Angular 中使用 FlexBox 创建一个简单的 HTML 结构。主要问题是 fxFlex 没有拉伸元素以匹配容器，并且 fxLayoutAlign 没有为子项提供正确的布局。也许这两个问题是相关的。

我有一套组件，代码如下。仪表板组件目前有一个包含 3 个子项的布局。然而，孩子们不会伸展以适应容器。此外，我不能使用 fxLayoutAlign 将孩子与空格对齐。标头组件也有 fxLayoutAlign，在这里它工作得非常好。

仪表板的其中一个子组件是另一个组件，称为 quest-list。该组件包含一个“任务”列表，其大小可能不同，这导致容器可滚动并溢出。但是，除非我以像素为单位指定任务列表的确切高度，否则它不会伸展以适合任何孩子。

Stackblitz 这里的问题

到目前为止，我的代码具有以下组件（使用 Angular Material，在编码时获得一些视觉反馈）：

主页.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>

任务列表.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>

任务列表组件.scss：

.quest-list-container {
    background-color: lightskyblue;
}

.overflow-container {
    overflow-y: scroll;
}

问题图片：

没有像素高度

使用 fxFlex="600px for <quest-list>

（使用全局样式：@import '~@angular/material/prebuilt-themes/indigo-pink.css'；

我发现这个问题非常令人沮丧，因为我有点确定解决方案非常简单。但是由于我现在花了几个小时查看它，但仍然看不到问题，我希望这里有人可以提供帮助。

提前致谢。

标签： htmlcssangularflexboxangular-flex-layout

解决方案

问题是，如果您只fxFlex在 上使用overflow-container，它将添加样式：flex: 1 1 0.0000001%，结合您的溢出滚动，这将导致容器折叠到可能的最小尺寸。如果你把它改成fxFlex="auto"它看起来已经好一点了。

但是，我想这不是您想要的全部。我猜你希望它只滚动那个内部区域，而不是整个页面。这也需要相当多的改变。很多height: 100%父元素都是从body元素开始的。关于min-height: 0几个元素的一对夫妇，将指令设置为fxFlex和auto删除fxFlex="100". .main-container因为，如果您将 a 添加fxFlex到元素，父元素将自动display: flex附加到它，即使这不是我们想要的。

我在这里做了一个完整的堆栈闪电战

就我个人而言，我已经放弃了 angular 的 fxLayout 包。使用这个包时，您会牺牲一定的速度，并且在 99% 的情况下，您可以只使用一些实用程序类。对于剩余的 1%，您可以使用其他方式。

推荐阅读