在Angular 5组件中为Flex行添加垂直间距的方法

首先说下你的CSS没生效的原因：Angular Flex Layout的fxLayout="row"指令不会给元素自动添加.row类，所以你写的.row > div选择器根本匹配不到任何元素，样式当然不会生效啦。

下面给你几个简单可行的方案，按推荐程度排序：

方案1：用Angular Flex Layout自带的fxLayoutGap（最推荐） #

这是Flex Layout专门用来处理容器子元素间距的指令，完全符合它的设计思路，不用写额外CSS，还支持响应式调整。

只需要给最外层的fxLayout="column"容器加上fxLayoutGap="20px"（间距大小你可以自己调），它会自动给所有子元素（就是那些fxLayout="row"的div）添加垂直间距，而且会自动跳过第一个元素的上边距，不会有多余的空白：

<div fxLayout="column" fxLayoutGap="20px">
  <div fxLayout="row">
    <button mat-raised-button color="accent">
      <mat-icon>play_button</mat-icon> Start Recording
    </button>
  </div>
  <!-- 空的row容器可以直接删掉，没必要留着占位，fxLayoutGap会自动处理间距 -->
  <div fxLayout="row">
    <button mat-raised-button color="accent">
      <mat-icon>play_button</mat-icon> Stop Recording
    </button>
  </div>
  <div fxLayout="row">
    <div fxLayout="column">
      <div>
        <mat-checkbox>Firefox</mat-checkbox>
      </div>
      <div>
        <mat-checkbox>Chrome</mat-checkbox>
      </div>
      <div>
        <mat-checkbox>Allow XPath</mat-checkbox>
      </div>
    </div>
  </div>
</div>

方案2：给row容器加自定义类，写CSS控制间距 #

如果你不想用fxLayoutGap，可以给每个fxLayout="row"的div加个自定义类（比如section-row），然后通过CSS设置margin：

HTML代码： #

<div fxLayout="column">
  <div fxLayout="row" class="section-row">
    <button mat-raised-button color="accent">
      <mat-icon>play_button</mat-icon> Start Recording
    </button>
  </div>
  <div fxLayout="row" class="section-row">
    <button mat-raised-button color="accent">
      <mat-icon>play_button</mat-icon> Stop Recording
    </button>
  </div>
  <div fxLayout="row" class="section-row">
    <div fxLayout="column">
      <div>
        <mat-checkbox>Firefox</mat-checkbox>
      </div>
      <div>
        <mat-checkbox>Chrome</mat-checkbox>
      </div>
      <div>
        <mat-checkbox>Allow XPath</mat-checkbox>
      </div>
    </div>
  </div>
</div>

CSS代码（放在组件的styles里）： #

.section-row {
  margin-bottom: 20px; /* 垂直间距大小 */
}

/* 可选：给最后一个row去掉底部margin，避免容器底部多出来空白 */
.section-row:last-child {
  margin-bottom: 0;
}

方案3：用Angular Material的spacing工具类（如果启用了） #

如果你项目里配置了Angular Material的排版工具，可以直接用它提供的margin类，比如mb-4（mb是margin-bottom，4对应20px，具体数值取决于你的Material配置），不用写CSS：

<div fxLayout="column">
  <div fxLayout="row" class="mb-4">
    <button mat-raised-button color="accent">
      <mat-icon>play_button</mat-icon> Start Recording
    </button>
  </div>
  <div fxLayout="row" class="mb-4">
    <button mat-raised-button color="accent">
      <mat-icon>play_button</mat-icon> Stop Recording
    </button>
  </div>
  <div fxLayout="row">
    <div fxLayout="column">
      <div>
        <mat-checkbox>Firefox</mat-checkbox>
      </div>
      <div>
        <mat-checkbox>Chrome</mat-checkbox>
      </div>
      <div>
        <mat-checkbox>Allow XPath</mat-checkbox>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user5047085