Css以对齐材质设计单选按钮

我正在使用mat单选按钮。 我预期的UI应该是这样的

使用以下代码

     <mat-radio-group name="employeeType" formControlName="employeeType" fxLayout="row">
                   <mat-radio-button *ngFor="let type of employeeTypes" (change)="showFieldByEmployeeType($event)"
                       [value]="type.name">
                       {{ type.name}}</mat-radio-button>
               </mat-radio-group>

但是我越来越

有什么有用的CSS使它看起来像预期的吗？

模板

---

它不会生成完全相同的结构，您必须使用值才能获得所需的结构。

谢谢@pratik。我刚刚将flex:1021%更改为flex:1019%，以获得预期的结果。

 <mat-radio-group class="radio-parent" name="employeeType" 
formControlName="employeeType" 
fxLayout="row">
           <mat-radio-button class="radio-item" *ngFor="let type of employeeTypes" 
(change)="showFieldByEmployeeType($event)"
               [value]="type.name">
               {{ type.name}}</mat-radio-button>
       </mat-radio-group>

.radio-parent{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.radio-item{
 flex: 1 0 21%;
  margin: 5px;
 }