Angular CSS实现复选框右移，左侧元素保持左对齐的方法

我对CSS不太熟悉，目前遇到一个布局问题：需要将权限复选框区块（Leitura/Escrita/Exclusão）向右对齐，同时保持模块名称（{{ modules.name }}）在左侧。希望得到技术帮助。

当前代码 #

CSS 代码 #

.checkboxpermissions{
  display: inline-flex;
  justify-content: space-between;
}

..modulecheckbox{
  display: grid;
  flex-direction: row;
}

HTML 代码 #

<mat-tab label="Permissões">
        <section>
          <h4>Modulos do Grupo de Segurança</h4>
          <hr />
          <form [formGroup]="form">
            <div class="modulecheckbox">
              <div *ngFor="let category of allCategories">
                <h4>{{ category.description }}</h4>
                <mat-checkbox
                  *ngFor="
                    let modules of filterItemsByCategory(
                      selectedAllModules,
                      category
                    )
                  "
                  [value]="modules.id.toString()"
                  >{{ modules.name }}
                  <div class="checkboxpermissions">
                    <mat-checkbox
                      [(ngModel)]="modules.read"
                      formControlName="read"
                      >Leitura</mat-checkbox
                    >
                    <mat-checkbox
                      [(ngModel)]="modules.write"
                      formControlName="write"
                      >Escrita</mat-checkbox
                    >
                    <mat-checkbox
                      [(ngModel)]="modules.delete"
                      formControlName="delete"
                      >Exclusão</mat-checkbox
                    >
                  </div>
                </mat-checkbox>
              </div>
             </div>
          </form>
        </section>
        <hr />
      </mat-tab>

解决方案 #

步骤1：修复CSS语法错误 #

.modulecheckbox 选择器前多了一个多余的点，先修正为单类选择器。

步骤2：调整布局实现左右分布 #

修改CSS代码如下，通过弹性布局实现模块名称左对齐、权限复选框右对齐：

/* 修正后的模块容器样式 */
.modulecheckbox {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 模块间添加间距，优化视觉效果 */
}

/* 给每个模块项设置弹性布局，实现两端对齐 */
.modulecheckbox mat-checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* 占满父容器宽度，确保两端对齐生效 */
}

/* 权限复选框区块样式调整 */
.checkboxpermissions {
  display: inline-flex;
  gap: 1.5rem; /* 控制三个权限复选框的间距 */
}

说明 #

• 给<mat-checkbox>设置display: flex和justify-content: space-between，让内部的模块名称和权限区块自动分布在左右两侧。
• 使用gap属性替代justify-content: space-between来控制权限复选框的间距，避免容器宽度变化时复选框过度分散。

内容的提问来源于stack exchange，提问作者Jeferson Carlos