如何使用 FlexLayout 增加一个组件的高度, Angular 4, Material 设计
How to increase height of one component using FlexLayout, Angular 4, Material Design
我想在两行之间留出一个空隙,如 plunkr 所示,但我也希望中间单元格为蓝色,在顶行,高度不同。
当我改变一个单元格的高度时,它会改变整行。我大一点的是class="two"
我有这个 html:
<md-card class="card-demo">
<md-card-title>another example</md-card-title>
<md-card-subtitle>some test work.
</md-card-subtitle>
<md-card-content>
<div fxLayout="column" ng-app="demoApp" layout-fill>
<div fxLayout="row" fxLayoutGap="20px" flex>
<div class="one" fxFlex="70"> test1 </div>
<div class="two" fxFlex="25"> test2 </div>
<div class="three" fxFlex="25"> test2 </div>
</div>
<div fxLayout="column" fxLayoutGap flex>
<div class="four" fxFlex="150"> test1
<p>one</p>
<p>one</p>
</div>
</div>
</div>
</md-card-content>
</md-card>
还有这个css:
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: green;
}
.four {
background-color: yellow;
}
您可以添加 fxLayoutAlign 来更改默认的 flex 行为
<div fxLayout="row" fxLayoutGap="20px" flex fxLayoutAlign="stretch flex-start">
<div class="one" fxFlex="70"> test1 </div>
<div class="two" fxFlex="25"> test2 </div>
<div class="three" fxFlex="25"> test2 </div>
</div>
https://stackblitz.com/edit/angular-pmborb?embed=1&file=app/app.module.ts
我想在两行之间留出一个空隙,如 plunkr 所示,但我也希望中间单元格为蓝色,在顶行,高度不同。
当我改变一个单元格的高度时,它会改变整行。我大一点的是class="two"
我有这个 html:
<md-card class="card-demo">
<md-card-title>another example</md-card-title>
<md-card-subtitle>some test work.
</md-card-subtitle>
<md-card-content>
<div fxLayout="column" ng-app="demoApp" layout-fill>
<div fxLayout="row" fxLayoutGap="20px" flex>
<div class="one" fxFlex="70"> test1 </div>
<div class="two" fxFlex="25"> test2 </div>
<div class="three" fxFlex="25"> test2 </div>
</div>
<div fxLayout="column" fxLayoutGap flex>
<div class="four" fxFlex="150"> test1
<p>one</p>
<p>one</p>
</div>
</div>
</div>
</md-card-content>
</md-card>
还有这个css:
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: green;
}
.four {
background-color: yellow;
}
您可以添加 fxLayoutAlign 来更改默认的 flex 行为
<div fxLayout="row" fxLayoutGap="20px" flex fxLayoutAlign="stretch flex-start">
<div class="one" fxFlex="70"> test1 </div>
<div class="two" fxFlex="25"> test2 </div>
<div class="three" fxFlex="25"> test2 </div>
</div>
https://stackblitz.com/edit/angular-pmborb?embed=1&file=app/app.module.ts