如何强制 flex 列使用所有可用宽度？答案

【问题标题】：How can I force a flex column to use all available width?如何强制 flex 列使用所有可用宽度？
【发布时间】：2020-09-13 09:27:46
【问题描述】：

我有以下标记，它有一个分隔符 col，所以我可以左对齐然后右对齐。它在笔记本电脑屏幕上看起来很棒。但是，在较大的显示器上，垫片不会拉伸以使用所有可用空间。输入框和按钮在笔记本电脑屏幕上很好地对齐，但显示器上的空间很大。

我怎样才能实现将按钮和输入框保持在一起并让垫片使用所有可用空间？

<div fxLayout="row" fxLayoutAlign="start center">
    <div fxFlex="15">
        <mat-form-field>
            <mat-select placeholder="Acciones Multiples">
                <mat-option [value]=""></mat-option>
                <mat-option value="Delete">Eliminar</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <div fxFlex="15">
        <button mat-flat-button color="primary">Aplicar</button>
    </div>
    <div fxFlex></div>
    <div fxFlex="8">
        <mat-form-field>
            <mat-select placeholder="Estado" (selectionChange)="applyFilter($event.value)">
                <mat-option [value]="">Todas</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <div fxFlex="16">
        <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Buscador por nombre o CIF">
        </mat-form-field>
    </div>
</div>

【问题讨论】：

你应该标记你正在使用的布局库。
Flex 项目会自动相互对齐。如果你想让一个项目占据 100% 的宽度，那么其他项目有 0% 就足够了。所以只需将“flex:1”设置为它
您可能需要flexFill。 github.com/angular/flex-layout/wiki/fxFlexFill-API
fxFlexFill 不起作用。它占用了右边的所有空间，matInput 完全消失了

标签： css angular flexbox

【解决方案1】：

Cristian Traìna 让我走上了正确的道路。我删除了所有的 fxflex 值，除了我设置为 100 的垫片。将它设置为 1 是不够的。然后我不得不在元素之间添加一些填充，因为 space-between 不起作用。

<div fxLayout="row" fxLayoutAlign="start center">
        <div class="pr-4">
            <mat-form-field>
                <mat-select placeholder="Acciones Multiples">
                    <mat-option [value]=""></mat-option>
                    <mat-option value="Delete">Eliminar</mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <div>
            <button mat-flat-button color="primary">Aplicar</button>
        </div>
        <div fxFlex="100"></div>
        <div>
            <mat-form-field>
                <mat-select placeholder="Estado" (selectionChange)="applyFilter($event.value)">
                    <mat-option [value]="">Todas</mat-option>
                    <mat-option value="Active">Activas</mat-option>
                    <mat-option value="Inactive">Inactivas</mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <div class="pl-4">
            <mat-form-field>
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Buscador por nombre o CIF">
            </mat-form-field>
        </div>
    </div>

【讨论】：