标签: angular-flex-layout

我正在尝试使用角度flex-layout,但我对指令fxFlex有问题,特别是参数flex-grow.

医生说:

flex-grow:定义一个flexbox项目应该增长多少(与其他项目成比例),如果有空间可用的话.flex-grow值会覆盖宽度.

所以我认为使用下面的代码,第二个div应该是第二个代码的两倍,应该填充空白空间:

<div fxLayout="row">
    <div fxFlex="2 1 30%">[flex="2 1 30%"]</div>
    <div fxFlex="1 1 40%">[flex="1 1 40%"]</div>
</div> 

但它不能像我预期的那样工作,我无法找出flex-grow使用该参数的条件是什么？

这是我合作过的那个人.

我使用Angular Material 2,我想要一个卡片头图标按钮.如何将按钮设置在右侧？

我的计划:

当前网站:

我想在标题中设置按钮rop.我该怎么做？我排除了类别代码,因为没有问题.在打字稿中,代码只是一个for循环来添加更多卡片和一个虚拟方法来点击卡片.

.healthy-search {
    width: 100%
}

.healthy-card {
    margin-right: 5px;
    margin-bottom: 5px;
}

<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="90%" fxFlex.xs="90%">
    <mat-form-field class="healthy-search">
      <textarea matInput placeholder="Suche"></textarea>
    </mat-form-field>
  </div>
</div>
<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="85%" fxFlex.xs="85%">
    <mat-expansion-panel>
    
     <!-- Here is the Category -->
     

     <!--Elements of Category -->

      <div class="flex-container" fxLayoutWrap fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
        <div class="flex-item healthy-card" fxFlex="400px" *ngFor="let number of numbers" (click)="cardClick()">
          <mat-card class="example-card">
            <mat-card-header>
              <mat-card-title>Title …

我正在尝试使用整页Angular Material选项卡,其中包含完整高度且具有居中消息的选项卡.我已经创建了这个stakblitz,因为我无法让它工作.fxFill似乎没有填充,我不确定这是Flexbox布局还是Angular Material的问题.我不想在每个标签内强制高度,因为这似乎打破了灵活布局的要点.

我肯定它很简单,但帮助一个穷困惑的开发人员习惯Bootstrap网格:)

更新 添加高度:计算(100vh - 100px); 到父div,然后到tall.component div使事情工作,但肯定这是一个糟糕的解决方案

这是我的HTML代码片段：

<mat-card-content>
    <div fxLayout="row" fxFlex="1 0 0">
        <div fxLayout="column">First</div>
        <div fxLayout="column" style="margin-left:auto">Second</div>
    </div>
</mat-card-content>

和CSS：

.mat-card-content {
    color: rgba(0, 0, 0, 0.700);
}

我需要在角度材料卡元素内实现柔性布局，以便两列能够响应并包含一些文本，如杂志中的内容：

现在我已经完成了 mat-card-header 并且它工作正常。任何建议将不胜感激。

<div fxFill fxLayout="column">
    <div fxFlex="8" fxLayout="column"> Fixed Header </div>
    <div fxFlex="20" fxLayout="row" [fxHide]="isShow"> Colapsable Header </div>
    <div fxFlex="72" fxLayout="column"> Page content </div>
</div>

像这样，如果我隐藏标题，页面的20％保持空白，导致包含页面内容的div仍然只占据72％

但是如果我使用 with calc <div fxFlex="calc(92% - 20%)">，这个各自的 div 会根据上面的 div 是隐藏还是显示来修改她的高度，所以即使 div 被折叠起来也永远不会有空白空间..

为什么它会这样工作？calc(92% - 20%) 它总是 72%，那么为什么它的行为不同呢？

编辑问题标题后的更多上下文：

在观察生成的 Html 后，我收集到了

• fxFlex="72" 设置一个 max-height="72%"
• fxFlex="calc(92%-20%)" 套 min-height="72%"

我创建了一个 angular 通用和 pwa 应用程序。我正在使用带有 flexlayout 的 mat-toolbar 创建导航栏。

我已经在我的模块中导入了 FlexLayoutModule、FlexLayoutServerModule。

我的示例导航栏是

<div [hidden]="loading" class="example-container">
  <mat-toolbar class="example-toolbar">
    <span>Navigation</span>
    <span class="example-spacer"></span>
    <div fxShow fxHide.lt-md>
      <a href="#" mat-button>Menu Item 1</a>
      <a href="#" mat-button>Menu Item 2</a>
    </div>
    <div fxHide fxShow.gt-sm>
      <a href="#">Show Side Menu</a>
    </div>
  </mat-toolbar>
</div>

我正在学习flex-layout，我正在尝试创建一个响应式UI。我在引导网格系统方面有多年的经验，但似乎无法理解如何完成以下工作（实时演示）：

在大型显示器上：

在中型显示器上：

在移动：

如果我理解正确的话，我必须使用的组合rows和columns，如下面的代码

    <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
   </div>

在小屏幕上，布局从更改row为column，这意味着我已经为大型和移动显示器实现了上面的UI示例。

问题：如何为中型监视器实现UI（请参见上图）？我不明白如何结合row和column

注意：我已经修复了问题#2，这是错误的数据。我仍然面临问题#1。我有以下折线图配置。我的数据集示例数据是

{x: '29/01/2017', y: '0.00234'}

options: {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        format: 'DD/MM/YYYY'
      }
    }]
  }
}

另外，我有 html （我使用 Angular Flex-layout）和打字稿：

<div fxFlex style="height: 100%">
    <div id="graph">
        <canvas id="canvasGraph">{{chart}}</canvas>
    </div>
</div>

// Hoping I can change the size of canvas to be the same as the parent
const canvas = <HTMLCanvasElement>document.getElementById('canvasGraph');
canvas.width = document.getElementById('graph').offsetWidth;
canvas.height = document.getElementById('graph').offsetHeight;

我有 2 个（现在只剩下 1 个）问题：

1. 最外面的div高度是100%。但由于某种原因，id="graph"的高度变成了150。而且画布也是150。我不知道这个150从哪里来。

2. 然而，图表上的数据显示，它们都杂乱地分布在最右侧，我的 x 轴值是从 1973 年到 2016 年。但我的数据只有 2017 …

我已经创建了一个简单的登录组件,我想垂直居中,但我不知道如何使用Angular Flex Layout库实现这一目标.

app.component.html

<router-outlet></router-outlet>

login.component.html

<div fxLayout fxLayoutAlign="center center">
    <mat-card fxFlex="30%">
        <mat-card-title>Login</mat-card-title>

        <mat-card-content fxLayout="column">
            <mat-form-field>
                <input matInput placeholder="Username">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Password">
            </mat-form-field>
        </mat-card-content>

        <button mat-raised-button color="accent">Login</button>
    </mat-card>
</div>

styles.scss

body{
    margin: 0;
    background-color: #eff2f5;
}

截图:

我试图按照这篇文章Angular flex-layout with ngFor来做我想做的事，但我做不到。

我有这个代码：

<div *ngFor="let room of listRoom;">
  <div class="room">
    Room {{room.label}}
    <div *ngFor="let bed of room.beds;">
      <div class="bed">
        Bed #{{bed.label}}
        <button mat-raised-button color="accent" (click)="assignThisBed(bed)">
          Assign this bed
        </button>
      </div>
    </div>
  </div>
</div>

我的listRooms元素通常在 10-15 个元素之间，我想连续有 3 个房间，然后是隔断线，3 个房间，......

有人能帮我吗？谢谢..

这是带有我的代码的StackBlitz。