如何在表格组中不垂直对齐角度+材质垫复选框？

我有两种情况：

一是在我使用FORM GROUP的同时使用angular 5 + Angular Material Design的地方。

这是我的多个复选框的代码

  
{{field?.properties.title}}
    

         
        {{element?.properties.title}}
    
  

有两种显示方法：

1）水平2）垂直

垂直仅发生在一个表单组中，在该表单组中我有多个复选框或单选按钮（也需要修复）。当我不使用表单组而只是放置复选框或单选按钮时，我会有CBX或RB的行，它们之间没有空格。

当此属性设置为true时，我需要垂直堆叠CHECKBOXES：

field.properties.stackVertically = true

我只能用CSS做到这一点。

这是表单组的CSS

.row[_ngcontent-c30] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

水平仪没有什么比这更好的了。

开关垂直是一个选项“如果”，这

field.properties.stackVertically = true

这是我在说的两张照片：

更新到伟大的答案！！！

参见SUCCESS图像，这是集成了解决方案的上述CODE。

我必须将解决方案放在第二行而不是我认为必须的位置。有点试验和错误，但有效！！！

现在这是上面的代码，由KimCindy回答！谢谢！

  

    ***
***
         
{{field?.properties.title}}
      


           
          {{element?.properties.title}}
      
    
  ***
***

KimCindy.. 7

也许您可以尝试使用ngClass指令。

请看下面的例子：

HTML：

Check 1
Check 2
Check 3

CSS：

.cb-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  flex-flow: row;
}

.mat-checkbox {
  margin-left:20px;
} 

.cb-vertival {
  flex-flow: column;
}

TS：

export class CheckboxLayoutExample {
tmp : boolean = false;
}

Stackblitz： https ：//stackblitz.com/edit/angular-addm8z ？file = app％2Fcheckbox-overview-example.css

也许您可以尝试使用ngClass指令。

请看下面的例子：

HTML：

Check 1
Check 2
Check 3

CSS：

.cb-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  flex-flow: row;
}

.mat-checkbox {
  margin-left:20px;
} 

.cb-vertival {
  flex-flow: column;
}

TS：

export class CheckboxLayoutExample {
tmp : boolean = false;
}

Stackblitz： https ：//stackblitz.com/edit/angular-addm8z ？file = app％2Fcheckbox-overview-example.css