Как заставить гибкий столбец использовать всю доступную ширину? - PullRequest
Новая
       4

Как заставить гибкий столбец использовать всю доступную ширину?

0 голосов
/ 26 мая 2020

У меня есть следующая разметка, в которой есть разделитель, поэтому я могу выровнять по левому краю, а затем по правому краю. Отлично смотрится на экране ноутбука. Однако на большом мониторе распорка не растягивается, чтобы использовать все доступное пространство. Поле ввода и кнопка хорошо совмещены на экране ноутбука, но на мониторе достаточно много места. ? 

<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>

1 Ответ

0 голосов
/ 26 мая 2020

Cristian Traìna направил меня на правильный путь. Я удалил все значения fxflex из всех, кроме разделителя, который я установил на 100. Установить его на 1 было недостаточно. Затем мне пришлось добавить немного отступов между элементами, так как пробел между ними не работал. 

<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>
...