如何使用 fxFlex 分布和调整元素大小？

Question

目标

我正在尝试为 mat-table 编写自己的搜索栏。搜索栏仅包含输入 - 每列一个。我将它放在 table 的正上方，现在我试图借助 flex-layout 平均分配它们，就像 table 对其列所做的那样。

问题

但问题是那些输入不听我的，也不收缩，而是溢出到包装元素之外。我需要它们同样收缩以适应包装 section 但我不知道该怎么做。

代码

这是我目前编写的代码示例：

    <section fxLayout="row" class="search-table" style="overflow-x: auto;">
        <mat-form-field *ngFor="let item of items" fxFlex>
            <input matInput type="text" placeholder="sample text" fxFlex>
        </mat-form-field>
    </section>

    .search-table {
        border: 1px solid black;
    }

编辑

Here's 我的问题的 stackblitz 示例。由于某种原因，Flex 布局在那里不起作用，所以我将 flex 添加到 css.

Answer 1

问题来自 .mat-form-field-infix class，它在输入上设置了 180px 的宽度。

解决方法：将下面的class添加到styles.css文件

.mat-form-field-infix {
  width: auto!important;
}

StackBlitz: here

如何使用 fxFlex 分布和调整元素大小？

How to distribute and resize elements using fxFlex?

html

css

flexbox

angular-flex-layout

angular

编辑