如何使用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; 
}

来源

2017-08-16 James Black

你能解释一下你想达到什么吗？ – Vega

@Vega - 基本上我们有三个顶部的div。我想要一个更大，但其他两个保持相同的大小。我正在尝试查看是否可以匹配UI设计者的要求。 –

有四个div。在运动员和你的代码中。在你的代码中有三个颜色的“区域”。哪一个应该更大？你能为我命名吗？ – Vega

您可以添加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

来源

2017-09-23 20:51:10

我使用了网格布局，但我也喜欢你的方法。 –

如何使用FlexLayout，Angular 4，Material Design来增加一个组件的高度

回答

相关问题