标签: angular-flex-layout

我正在使用 Grid List of angular material 2。

这是 plunker https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview

在这里，我定义了一个包含三列的网格列表，并且有三个图块（按定义为三列显示在一行中）。

我想改变拼贴的布局方向，比如如果屏幕尺寸在某个点缩小，那么所有拼贴都应该在另一列下方的第一列中，cols参数值以某种方式更改为 1。这怎么可能？flex-layout 可以吗？

我试图将2个元素彼此相邻放置，其中一个占据屏幕的25％，另一个是有角的router缝机出口，该出口占据了容器的其余部分。使用以下内容时，两个元素都位于屏幕的两侧，中间有空格。**部分是有问题的部分

  <div class="container"
         fxLayout>
    <admin-route-menu fxFlex="25%" fxShow.lt-sm="false"></admin-route-menu>
    <router-outlet fxFlex></router-outlet>
  </div>

看起来像

左侧的admin-route-menu标签只是基本的html和css，其中html中有一个mat-list。路由器插座可以根据角度规格采用任何元素。如果有帮助的话，我可以加入admin-route-menu。

我也尝试使用常规的柔韧性盒，但是结果是一样的。

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .wrapper-left
{
  background: #fcc;
}
.wrapper > .wrapper-right
{
  background: #ccf;
  flex: 1;
}

任何帮助表示赞赏，谢谢

我目前正面临使用flex布局布局Angular2的材质模块的问题.

正如您将在下面的示例中看到的以及附加的实时版本,Angular2的工具栏模块似乎不允许将flex布局放置在 mat-toolbar

<mat-toolbar color="primary">

    <div fxLayout="row" fxLayoutAlign="end">
        <a mat-button fxFlex="auto">Item 1</a>
        <a mat-button fxFlex="auto">Item 2</a>
        <a mat-button fxFlex="auto">Item 3</a>
        <a mat-button fxFlex="auto">Item 4</a>
    </div>

</mat-toolbar>

<div fxLayout="row" fxLayoutAlign="end">
    <a mat-button>Item 1</a>
    <a mat-button>Item 2</a>
    <a mat-button>Item 3</a>
    <a mat-button>Item 4</a>
</div>

实例

编辑版

我想要实现的是在右侧对齐按钮的位置.外面mat-toolbar的一切就像一个魅力.我有什么遗漏或根据材料仍然是beta的错误吗？

示例： https: //i.stack.imgur.com/8M5rR.png

我已经在父级上尝试了 fxFlexAlign - fxLayoutAlign，给它一个 ID 并在所有内容上使用 display:flex + justify-content:center 和 !important 。

问题是——上面所有的东西都对它做了一些事情，它对 CSS 和 FlexLayout 指令做出反应，但无论如何，它看起来仍然明显未对齐。

经过检查，很明显它是从“容器”的右下角开始生长的，并且根本不关心以任何方式对齐。

我在处理这些问题时缺少什么吗？我浏览了文档+ stackoverflow + 谷歌搜索，但找不到任何东西。

我正在尝试使用https://tburleson-layouts-demos.firebaseapp.com/#/docs 中提到的 angular flex 布局构建角度材料应用程序，我尝试了各种组合，但没有任何效果对我有用。我试图在工具栏下构建一些卡片，它应该占据大约 70% 的区域，居中对齐，但它们最终使用了所有空间。我的 html 是

<!--The content below is only a placeholder and can be replaced.-->
<div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<div fxLayout="row">
  <mat-toolbar color="primary">
    <span>Flex layout Example</span>
  </mat-toolbar>
</div>
<div fxLayout="row" fxFlex="66">
  <mat-card>
    <mat-card-header>Sample Card</mat-card-header>
  </mat-card>
</div>
</div>

如果我在 css 类中添加 width:66% 它可以工作，但为什么我不能只使用 fxFlex 呢？

根据manu的建议。

<!--The content below is only a placeholder and can be replaced.-->
<div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<div fxLayout="row">
  <mat-toolbar color="primary">
    <span>Flex layout Example</span>
  </mat-toolbar>
</div>
<div fxLayout="row" …

我在我的角度项目中使用材质和柔性布局。我有一个 mat-progress-spinner，我想将文本置于其中。我使用绝对位置得到了它，但我的问题是，它不会保持在不同尺寸的屏幕上居中。这是我的代码

子组件.html

<div>
  <mat-progress-spinner mode="indeterminate" [strokeWidth]="2" [diameter]="192"></mat-progress-spinner>
  <div class="message">{{ message }}</div>
</div>

子组件.scss

.mat-progress-spinner {
  display: inline-block;
  vertical-align: middle;
}

.message {
  position: absolute;
  text-align: center;
  top: 49%;
  left: 44%;
}

这是一个以父组件为中心的子组件，使用以下内容

父组件.html

<div fxLayout="column" fxLayoutAlign="center center" fxFill>
  <app-child></app-child>
</div>

谢谢

我写了这样的代码：

    <div fxLayout="row wrap"
         fxLayoutGap="20px"
         fxLayoutAlign="flex-start">
      <mat-card fxFlex="0 1 calc(33.3% - 20px)"
        class="my-card"
        *ngFor="let item of items">
        ...
      </mat-card>
    </div>

看起来不错，只是行与行之间没有空格。如何使用 Angular flex-layout 和材质 UI 库（此处为 mat-card）添加行之间的垂直间隙？

提前致谢！

这个问题与 Angular 2+ 和 @angular/flex-layout 包有关。

fxFlex="30"例如，在尝试使用时，CSS 样式并未应用于元素。

<mat-toolbar fxFlex="30" color="primary">
    <h2>Uh-oh</h2>
</mat-toolbar>

这是我到目前为止所做的：

https://stackblitz.com/edit/angular-jsmp9l

在代码片段上，我们可以看到一个包含按钮的简单工具栏（以更大的尺寸打开 HTML 视图，因为有一些fxShow / fxHide指令正在触发）。

我想要做的是按下 div 末尾的登录按钮，最右边。

我尝试了以下方法：

• <span style="flex: 1 1 auto;"></span>在登录和联系按钮之间添加一个
• 添加一个style="margin-left: auto;"到登录按钮
• 添加fxFlexFill到div包含链接的元素，并用重试span及margin-left以上作为mentionned
• 四处寻找有关 Flex 容器的文档，但没有任何帮助

如果我删除div容器并使用<span style="flex: 1 1 auto;">它正常工作，登录按钮会出现在工具栏的末尾（水平）。

我想了解为什么div容器会导致这种行为，以及如何将登录按钮推到右侧。也许我对 Flex 容器的理解不是很好，所以欢迎任何指点。

Angular Flex Layout 在使用 Angular Material 时非常有用，有没有办法在 TypeScript 文件中使用 flex 布局 API？

例如从这个 URL，有没有办法在 TypeScript 文件中获取 MediaQueries 值？

breakpoint  mediaQuery
xs  'screen and (max-width: 599px)'
sm  'screen and (min-width: 600px) and (max-width: 959px)'
md  'screen and (min-width: 960px) and (max-width: 1279px)'
lg  'screen and (min-width: 1280px) and (max-width: 1919px)'
xl  'screen and (min-width: 1920px) and (max-width: 5000px)'
lt-sm   'screen and (max-width: 599px)'
lt-md   'screen and (max-width: 959px)'
lt-lg   'screen and (max-width: 1279px)'
lt-xl   'screen and (max-width: 1919px)'
gt-xs …