Angular FlexLayout布局间隙RTL方向问题

Question

我写了一个Angular应用程序，并使用angular material和flexLayout。 我在样式direction:rtl方面遇到了问题。fxLayoutGap会在每个元素之前出现右边距，但最后一个元素除外。请在此处查看示例：stackblitz angular material flex layout rtl gap（我成功解决了最后一个元素后的空div问题，但是这太丑了...请参见stackblitz angular material flex layout rtl gap with empty div）。有什么想法吗？

- Stack Overflow

Answer 1

我认为当方向为反向时，这是fxLayoutGap的问题。您可以添加以下内容：

.mat-form-field:last-child{
  margin-right: 25px;
}

或者您可以删除fxLayoutGap并在子项中添加25px的右边距：

.mat-form-field{
  margin-right: 25px;
}

将 src/styles.css 文件全局化。

分支演示。

- Fateme Fazli

---

谢谢，我考虑使用last-child来解决问题，但这只适用于特定的间隙。我希望有一个基础设施解决方案，以防止在每个组件内进行处理。 - Stack Overflow

@StackOverflow 请查看此问题。根据文档：fxLayoutGap不响应反向流方向，但我认为在更新的版本中已经修复或将被修复。 - Fateme Fazli