如何使用FlexLayout,Angular 4,Material Design来增加一个组件的高度
问题描述:
我想在两行之间获得间距,如plunkr所示,但我也希望中间的单元格为蓝色,在顶部行,是不同的高度。如何使用FlexLayout,Angular 4,Material Design来增加一个组件的高度
当我改变一个单元格的高度时,它会改变整个行。一个我一直在大是class="two"
我有这个网站:
<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
+0
我使用了网格布局,但我也喜欢你的方法。 –
你能解释一下你想达到什么吗? – Vega
@Vega - 基本上我们有三个顶部的div。我想要一个更大,但其他两个保持相同的大小。我正在尝试查看是否可以匹配UI设计者的要求。 –
有四个div。在运动员和你的代码中。在你的代码中有三个颜色的“区域”。哪一个应该更大?你能为我命名吗? – Vega