Angular FxFlex 布局答案

【问题标题】：Angular FxFlex LayoutAngular FxFlex 布局
【发布时间】：2020-09-13 13:29:56
【问题描述】：

我正在学习 FxFlex 而不是使用 Bootstrap 以及 Angular Material。而且，我正在拔头发。在线文档和示例并不多，现有的文档和示例也没有那么有用。该系统看起来相当简单，但它让我感到困惑。

基本上，我有一个表格和一个按钮。我想将按钮放在页面右侧及其下方的表格中。我似乎无法使用 FxFlex 将按钮移动到屏幕右侧。在 bootstrap 中，我会使用 float 或 col-offset，但这里并没有真正可用的网格系统。

我看到了关于间隔一组项目而不是单个项目的教程。

我正在寻找类似网格的体验。

以下不是实际代码，只是大概。但概念是一样的。创建列容器。在里面创建一行，也许用换行。然后在里面有项目，在每个项目中你可以使用 fxFlex="" 来修改大小/位置。这些都不允许我在页面右侧放置一个按钮

<div fxLayout="column">
  <div fxFlexLayout="row" fxLayoutAlign="end">
    <button>Submit</button>
  </div>
</div>

【问题讨论】：

如果您需要网格布局，为什么不使用 CSS 网格？
考虑到@angular/flex-layout 一直处于测试阶段，并且在生产环境中使用此类库是个坏主意......另外，当你有样式表时，为什么要使用库来设置属性样式只是使用正确的像 CSS 网格这样的样式。
谢谢。在对 angular-flex 感到沮丧之后，我转向 CSS 网格。基本上我想要一个最小的类结构来对齐事物。但是，并非所有引导程序的附加功能
Angular Flex-Layout 确实提供了使用 CSS 网格的能力，因为 6.0.0-beta.16。请参阅API documentation 了解更多信息。
fxFlexOffset 属性用于偏移元素(Wiki)。这是 Flex-Layout 的演示链接(Demo)。

标签： angular angular-material angular-flex-layout

【解决方案1】：

只是改变：

<div fxFlexLayout="row" fxLayoutAlign="end">
   <button>Submit</button>
</div>

收件人：

<div fxFlexLayout="row-reverse">
   <button>Submit</button>
</div>

希望对你有帮助。

【讨论】：

【解决方案2】：

当您在页面中有许多具有 flex 布局的 div 时，您可以使用 fxFlexOrder

更改 div 的顺序以更改页面中的位置

【讨论】：

【解决方案3】：

"fxFlexLayout" 不是指令，不赋予任何规则，并且不在文档中。你的意思是 fxLayout。此外，当您在元素上使用 fxLayoutAlign 时，不需要 fxLayout。 FxLayout 为您提供您在 fxLayoutAlign 中已经获得的 css 规则，即： flex-direction: row; box-sizing：边框框；显示：弹性；

顺便说一句，你上面写的代码确实有效。但这足以得到你想要的。

    <div fxLayout="column">
      <div fxLayoutAlign="end">
        <button>Submit</button>
      </div>
    </div>

【讨论】：