如何使用 fxFlex 分配和调整元素大小？答案

【问题标题】：How to distribute and resize elements using fxFlex?如何使用 fxFlex 分配和调整元素大小？
【发布时间】：2020-11-29 18:41:45
【问题描述】：

目标

我正在尝试为 mat-table 编写自己的搜索栏。搜索栏仅包含输入 - 每列一个。我把它放在桌子的正上方，现在我试图在 flex-layout 的帮助下平均分配它们，就像桌子和它的列一样。

问题

但问题是这些输入不听我的，也不会缩小，但它们会溢出到包装元素之外。我需要它们同样缩小以适应包装 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-layout 在那里不起作用，所以我将 flex 添加到 css。

【问题讨论】：

任何 stackblitz 工作示例都可以帮助调试问题。
请稍等
什么叫不听你的不缩水？你需要什么？
例如，如果我有 5 个输入，我希望它们填充所有 section 包装器的宽度，并在我调整浏览器大小时保持内联。

标签： html css angular flexbox angular-flex-layout

【解决方案1】：

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

解决方案：将下面的类添加到styles.css文件中

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

StackBlitz： here

【讨论】：