Question

我想在两行之间找到一个间隙，例如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;
}

Answer 1

您可以添加fxLayoutAlign以更改默认弹性行为

  <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

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

1 个答案: