How to style checkboxes created via an array horizontally with labels above checkboxes?

Ionic Framework Ionic Angular
1

Hi i have a set of checkboxes created from an array and i can not get the labels to appear above the check boxes and display horizontally. When i do position them horizontally using inline-flex the labels are beside each box and the last label in the array is cut of. Any suggestion would be helpful.
//screenshot of output

ScreenshotCheckBoxValues
ScreenshotCheckBoxValues715×130 13.1 KB 

             // html code for checkboxes
         <form [formGroup]="checkboxGroup">
            <ion-card-subtitle>
               <ion-label class="title">Title  </ion- 
            label>
            </ion-card-subtitle>
           <ion-card-content class="checkbox">
             <ng-container *ngFor="let checkbox 
               of  valence; let i = index" 
      formArrayName="valence">
        <!--iterate over  array-->
        <input type="checkbox" 
            [formControlName]="i" 
        (change)="onChange(checkbox)" /> 
                  {{checkbox.name}}
                        <br />
              </ng-container>
                   </ion-card-content>
           </form>