[英]how to avoid horizontal and vertical scrolls in angular using angular material flexlayout
[英]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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.