css - fxFlex 没有影响
问题描述
我正在使用 fsflex 左对齐前两个 div,右对齐第二个 div。我使用了一个垫片和 fsflex,但 fsflex 没有做任何事情并且让所有东西都保持对齐。
我有以下标记:
<div id="filter-menu" fxLayout="row" fxLayoutAlign="start center">
<div fsFlex="10">
<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 fsFlex="10">
<button mat-flat-button color="primary">Aplicar</button>
</div>
<div fsFlex="60" class="spacer"></div>
<div fsFlex="10">
<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 fsFlex>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Buscador por nombre o CIF">
</mat-form-field>
</div>
</div>
我可以使用以下 css 达到预期的效果,但宁愿使用 angular flex:
#filter-menu {
> div:not(.spacer) {
flex-grow: 3;
}
.spacer {
flex-grow: 150;
}
}
解决方案
您正在使用fsFlex
而不是fxFlex
推荐阅读
- python - 有没有比这更好的方法来获取 Unicorn 中的所有注册键(在 python 中)?
- git - 从分支拉取更改推送到服务器
- json - 如何在 Java/JSON 中处理 POST 请求中的转义字符?
- arrays - 列表如何以 Common Lisp 中的数组不可能的方式共享结构?
- c# - 无法加载文件或程序集“Microsoft.VisualStudio.TestPlatform.MSTest.TestAdapter”或其依赖项之一。系统找不到文件
- web-config - aspnet_regiis 说成功但 connectionString 部分未更改
- blazor - 使用 Identity 托管的 Blazor WASM ASP.NET Core 在部署时不起作用
- pandas - 在 For Loop Pandas 中按行查找最大梯度
- mysql - SQLSTATE[42000] [1226] 用户已超出 'max_user_connections' 资源
- ruby-on-rails - 如何通过迭代在 FactoryBot 中创建多条记录