title: How can I vertically align angular + material mat-checkbox not in form group?
body: <p>I have two situations:</p>
  
  <p>One, is where I'm using a FORM GROUP with  using angular 5 + Angular Material Design.</p>
  
  <p>Here's my code for multiple checkboxes</p>
  
  <pre><code>&lt;div *ngSwitchCase="'checkboxField'" class="checkbox-field"&gt;
    &lt;div *ngIf="!field?.properties?.hideTitle"&gt;{{field?.properties.title}}&lt;/div&gt;
      &lt;div class="checkbox-label" *ngFor="let
           element of field?.elements"&gt;
           &lt;mat-checkbox
          [value]="element?.properties.value"
          [disabled]="field?.properties.disabled"
          [checked]="isItemChecked(element?.properties.value)"
          (change)="onCheckboxChange(element?.properties.value);
          notifyFormOfChange($event);"&gt;
          {{element?.properties.title}}
      &lt;/mat-checkbox&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There are two ways this can be displayed:</p>
  
  <p>1) HORIZONTAL
  2) VERTICAL</p>
  
  <p>Vertical ONLY occurs with a form-group where I have multiple checkboxes or radio buttons (which I need to fix as well).  When I don't use a form-group and simply put checkboxes or radio buttons, I have a LINE of CBX's or RB's with no space between them.</p>
  
  <p>I need to VERTICALLY stack the CHECKBOXES when this property is set to true:</p>
  
  <pre><code>field.properties.stackVertically = true
  </code></pre>
  
  <p>I can only do this with CSS.</p>
  
  <p>Here's the CSS for the form-group</p>
  
  <pre><code>.row[_ngcontent-c30] {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
  }
  </code></pre>
  
  <p>And there's nothing like that for the HORIZONTAL.</p>
  
  <p>Switch VERTICAL is an OPTION "IF" this</p>
  
  <pre><code>field.properties.stackVertically = true
  </code></pre>
  
  <p>Here are the two pics of what I'm speaking of:</p>
  
  <p><a href="https://i.stack.imgur.com/umwvj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/umwvj.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/kPA7m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kPA7m.png" alt="enter image description here"></a></p>
  
  <p>UPDATE TO THE GREAT ANSWER!!!</p>
  
  <p>See the SUCCESS image and here's the CODE from above with the solution integrated.</p>
  
  <p>I have to place the SOLUTION in the SECOND line not where I thought it had to be. A bit of Trial and Error but it works!!!</p>
  
  <p><a href="https://i.stack.imgur.com/TauHQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TauHQ.png" alt="Solution shown with the integrated code"></a></p>
  
  <p>Now here's the code from above with answer by KimCindy! Thank you!</p>
  
  <pre><code>  &lt;div *ngSwitchCase="'checkboxField'" class="checkbox-field"&gt;
      ***&lt;div class="cb-wrapper" [ngClass]="{'cb-vertical': field?.properties?.stackVertically }"&gt;***
           &lt;div *ngIf="!field?.properties?.hideTitle"&gt;{{field?.properties.title}}&lt;/div&gt;
        &lt;div class="checkbox-label" *ngFor="let
             element of field?.elements"&gt;
  
             &lt;mat-checkbox
            [value]="element?.properties.value"
            [disabled]="field?.properties.disabled"
            [checked]="isItemChecked(element?.properties.value)"
            (change)="onCheckboxChange(element?.properties.value);
            notifyFormOfChange($event);"&gt;
            {{element?.properties.title}}
        &lt;/mat-checkbox&gt;
      &lt;/div&gt;
    ***&lt;/div&gt;***
  &lt;/div&gt;&lt;!--checkbox--&gt;
  </code></pre>