标签: angular-flex-layout

我在角4项目中使用了材质flex的标记,看起来像这样.

<div fxLayout="row">
  <div fxFlex="65">

  </div>
  <div fxFlex="35">

  </div>
</div>

我有一系列这样的元素:

public array: [object] = [
    {
        firstName: 'value',
        lastName: 'value'
    },
    {
        firstName: 'value',
        lastName: 'value'
    },
    {
        firstName: 'value',
        lastName: 'value'
    },
    {
        firstName: 'value',
        lastName: 'value'
    },
    {
        firstName: 'value',
        lastName: 'value'
    },
];

我想遍历这个数组并填充65%div中所有元素的一半,其余元素填充在35%div中.如何*ngFor正确地使用指令？现在我有这样的解决方案.但它看起来很可怕而且不易阅读.

    <div fxLayout="row">
      <div fxFlex="65">
        <div *ngFor="let item of array; let i = index">
          <div *ngIf="i < 3">
            <p>{{ item.firstName }}</p>
            <p>{{ item.lastName }}</p>
          </div>
        </div>
      </div>
      <div fxFlex="35">
        <div *ngFor="let …

我想在页面中央显示卡片。当我将类进度向导放在单独的div中时，如下所示。

<div class="progress-wizard" >
  <div fxLayout="row" fxLayoutAlign="center center">
    <mat-card>
      <button mat-raised-button color="primary">Primary</button>
    </mat-card>
  </div>
</div>

CSS：

.progress-wizard {
  height: 90vh!important;
}

这样，第二个div不继承父div的高度，并且card不在中心对齐。我想知道弹性版面如何运作，并为此解决正确的解决方案？

谢谢。

有没有办法让@ angular / flex-layout 根据屏幕大小更改类？

我知道我可以这样做：

<div fxFlex="grow" fxLayout="row" fxLayout.xs="column">

和这个：

<div fxFlex="22"    fxFlex.md="10px" fxHide.lg>

等等

我希望能够执行以下操作：

<div class="myWideClass" class.xs="myNarrowClass">

有什么方法可以做这种事情-根据屏幕宽度更改类吗？

谢谢！

我正在尝试使用 angular material 和 flex css 在 angular 2 中创建一个简单的布局。

下面是我的代码...

<div  class="background" >

<mat-toolbar fxLayout="row"   fxLayoutAlign="space-between  none" >

<div  fxLayout="column" > 
<p>SPACE STUDY</p>
<h6>Rockefeller FY 2018</h6>

<div  fxShow="true" fxHide.gt-sm="true" fxLayout="column" fxLayoutAlign="start none">

 <h6 [matMenuTriggerFor]="dashboarditems">
  <mat-icon style="transform: scale(1.2);">line_weight</mat-icon> </h6>

  <mat-menu  class="mat-menu-panel"  [overlapTrigger]="true" #dashboarditems="matMenu"><br/><br/>
<a  routerLink='/home' routerLinkActive='active'>
<span matTooltip="HOME"><mat-icon style="color:lightgreen;">home</mat-icon></span></a><br/><br/><br/>

<a >
<span matTooltip="SPACE SURVEY"><mat-icon style="color:deeppink;">explore</mat-icon></span></a><br/><br/><br/>

<a  >
<span matTooltip="SPACE ADMIN"><mat-icon style="color:lightblue;">account_circle</mat-icon></span></a><br/><br/><br/>

<a >
<span matTooltip="REPORTS"><mat-icon style="color: orange;">assignment</mat-icon></span></a><br/><br/><br/>

<a >
<span matTooltip="JOINT USE"><mat-icon style="color:yellow;">supervisor_account</mat-icon></span></a><br/><br/><br/>

<a  >
<span matTooltip="HELP"><mat-icon style="color:red;">help</mat-icon></span></a><br/><br/><br/>
  </mat-menu>
</div> …

我正在创建一个包含 3 列的新页面布局。我希望我的内容由几个不同的元素组成，填充第一列的可用高度，然后换行到下一列，依此类推。用户可以根据需要添加元素。

我正在使用 Angular 7 和 Flex-Layout。我查看了https://tburleson-layouts-demos.firebaseapp.com/#/docs但这些都与我的问题不相似。

我还查看了： -使用 CSS 自动流动 2 列文本 -让网格容器填充列而不是行

无济于事。

CSS 列布局将我的内容平均分成 3 列。它在换行之前不会填充第一列。

我希望它填充第一列，然后填充第二列，最后填充第三列。这是否可以通过 flex 或 CSS 网格/列来实现并不重要

我习惯于使用 Bootstrap，对我来说，网格系统在我的脑海中非常清晰。现在，我正在尝试使用 Angular Flex 布局，即使阅读文档，我也不明白如何使用它。

例如，我有以下使用 Bootstrap 4 的代码：

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-8 col-lg-4">
      Something...
    </div>
    <div class="col-sm-12 col-md-8 col-lg-4">
      Something...
    </div>
    <div class="col-sm-12 col-md-8 col-lg-4">
      Something...
    </div>
  </div>
</div>

如何使用 Angular Flex Layout 编写相同的代码？

I had setup a basic project with angular 9 , angular material and angular/flex-layout. How ever I cannot get angular/flex-layout working . Here is what I have done

Login-view.component.ts

<div class="container"  fxLayout="row" fxLayoutAlign="center center" >

  <mat-card class="login-box">
    <mat-card-title>Login</mat-card-title>
    <mat-card-content>
      <form #loginForm="ngForm" (ngSubmit)="login(loginForm)">
        <p>
          <mat-form-field>
            <input type="text" name="username" matInput placeholder="Username" ngModel required />
          </mat-form-field>
        </p>

        <p>
          <mat-form-field>
            <input type="password" name="password" matInput placeholder="Password" ngModel required />
          </mat-form-field>
        </p>
        <div class="button">
          <button type="submit" mat-button>Login</button>
        </div>
      </form>
    </mat-card-content>
  </mat-card>

</div>

login-view.component.scss

mat-form-field{
    width: 100%; …

编辑：

是否存在 FxLayout 指令将关闭按钮移动到左侧并将其他按钮保留在右侧？或者我怎样才能通过CSS达到相同的结果？

<div class="actions" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
    <button mat-raised-button color="secondary" [mat-dialog-close]="true" >Close</button>
    <button mat-raised-button color="primary" (click)="previous()" >Previous</button>
    <button mat-raised-button color="primary" (click)="next()" >Next</button>
</div>

我正在使用带有 Angular5 和 Angular Flex-layout 的 Angular 材料，并且我一直在寻找类似的全屏覆盖窗口Angular 组件，但似乎他们还没有实现，因为我更喜欢花时间在工作上功能而不是附件组件，我决定请你们以“角度方式”分享一个关于它的示例（如果您已经编码了）。

我有这样的布局：

<div fxLayout="row" fxFill fxLayoutAlign="start start">
    <app-comp1 class="comp"></app-comp1>
    <app-comp2 class="comp"></app-comp2>
    <app-comp3 class="comp"></app-comp3>
</div>

每个组件（comp1、comp2等）等都代表一个小部件。我有我的部件尺寸（comp1，comp2，等）的CSS设置

.comp {
  width: 700px;
  height: 500px;
}

问题是，如果添加更多小部件（app-comp4等），它们都显示在一行中，但如果当前行中没有空格，我希望小部件显示在新行中。窗口小部件的数目是动态的，而不是由CSS控制窗口小部件的大小fxFlex="xxx%"，所以不能使用fxFlex="xxx%"。

任何想法如何实施？