Css 对齐材料设计单选按钮

Question

我正在使用 mat-radio-buttons。 我预期的 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 让它看起来像预期的那样？

Answer 1

模板

 <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>

CSS

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

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