如何使用 FlexLayout、Angular 4、Material Design 增加一个组件的高度答案

【问题标题】：How to increase height of one component using FlexLayout, Angular 4, Material Design如何使用 FlexLayout、Angular 4、Material Design 增加一个组件的高度
【发布时间】：2018-01-25 01:57:00
【问题描述】：

我想在两行之间留出空隙，如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;
}

【问题讨论】：

您能否再解释一下您想要实现的目标？
@Vega - 基本上我们在顶部有三个 div。我想要一个更大，但另外两个保持相同的大小。我正在尝试看看我是否可以满足 UI 设计师的要求。
有四个 div。在 plunker 和您的代码中。在您的代码中有三个彩色“区域”。哪个应该更大？你能给我起个名字吗？
@Vega - 谢谢，我添加了更多的特异性。 Class="two" 是我想要更大的那个。

标签： angular typescript material-design angular-flex-layout

【解决方案1】：

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

【讨论】：

我选择了网格布局，但我也喜欢你的方法。