使用 flex-layout (fxlayout) 对齐 Div 项目不起作用

Question

我正在尝试调整我的 div，但它无法正常工作。

这里是代码。 （我希望我的 2 并排为 75% / 25% 我还希望我的选择（mat-radio）在第一个 DIV 的顶部，并且两者并排选择选择（下拉）。就像在我包含的图片中一样。

代码如下：

<form [formGroup]="concessionFrmGroup">
<div class="mat-typography app-frame">
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="center center">
  <div class="padding" flex="50">
    <label id="radio-group-label">Affrontement entre :</label>
    <mat-radio-group aria-labelledby="radio-group-label" class="radio-group">
      <mat-radio-button class="radio-button" value="1" checked="true">Concession</mat-radio-button>
      <mat-radio-button class="radio-button" value="2">Équipe</mat-radio-button>
    </mat-radio-group>
    <div class="padding">
      Concession:
      <mat-dialog-content class="alternate-theme mat-app-background">
        <mat-form-field>
          <mat-label>Choisir une concession</mat-label>
          <mat-select [(ngModel)]="selectedConcession" formControlName="concessionFrmGroup" >
          </mat-select>
        </mat-form-field>
      </mat-dialog-content>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden={{this.logo1hidden}} />
      <div class="logo" fxFlexAlign="center">
        {{this.name1}}
      </div>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden="true" />
    </div>
    <div fxLayoutAlign="flex-start">
      Contre
    </div>
    <div class="padding">
      Concession:
      <mat-dialog-content class="alternate-theme mat-app-background">
        <mat-form-field>
          <mat-select placeholder="Choisir une concession" [(ngModel)]="selectedConcession2"
            formControlName="concessionFrmGroup" >

          </mat-select>
        </mat-form-field>
      </mat-dialog-content>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden="true" />
      <div class="logo" fxFlexAlign="center">
        {{this.name2}}
      </div>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden="true" />
    </div>
  </div>
  <div class="padding">
    <label id="radio-group-label">Type :</label>
    <mat-radio-group aria-labelledby="radio-group-label2" class="radio-group">
      <mat-radio-button class="radio-button" value="s" checked="true">Saison</mat-radio-button>
      <mat-radio-button class="radio-button" value="p">Série</mat-radio-button>
    </mat-radio-group>

  </div>
</div>

<mat-tab-group class="mat-tab">
  <!-- <div class="bgborder bold left"> -->
  <mat-tab label="Test 0:">
    <!-- </div> -->
    <div fxLayout="column" fxLayoutGap="32px" fxLayoutAlign="space-around none" class="bg2">

    </div>
  </mat-tab>

  <mat-tab label="Test 1:">
    <div class="alternate-theme mat-app-background div-bg center" color="primary">
     Test 1
    </div>
    <div fxLayout="row " fxLayoutGap="32px" fxLayoutAlign="space-evenly none" class="bg1">

    </div>
  </mat-tab>

  <mat-tab label="Test 2:">
    <div class="alternate-theme mat-app-background div-bg center" color="primary">
     Test 2
    </div>
    <div fxLayout="row " fxLayoutGap="32px" fxLayoutAlign="space-evenly none" class="bg1">

    </div>
  </mat-tab>

  <mat-tab label="Test 3:">
    <div class="alternate-theme mat-app-background div-bg center" color="primary">
      Test 3
    </div>
    <div fxLayout="row " fxLayoutGap="32px" fxLayoutAlign="space-evenly none" class="bg1">

    </div>
  </mat-tab>

</mat-tab-group>

这是 stackblitz 的链接： https://angular-testtable.stackblitz.io/ https://stackblitz.com/edit/angular-testtable?file=src%2Fapp%2Fconcession.component.html

这是我希望我的页面看起来像的“示例”：

（我用 flex 尝试了很多东西，但我无法得到图像中显示的结果）

感谢您的帮助。

flex 布局的新手。

Answer 1

我正在测试你的问题，因为这对我来说很有趣，结果如下所示。

代码是：

<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutAlign="center stretch" style="margin-top: 34px;">
  <div fxFlex="75" style="background-color: aquamarine; padding: 24px;">

    <div fxLayout="row">
      <div fxFlex="100" fxLayoutAlign="center" style="background-color: rgb(42, 165, 48); padding: 24px;">
        <h2>Radio button</h2>
      </div>
    </div>

    <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px">
      <div fxFlex="50" style="background-color: rgb(236, 203, 203); padding: 24px;">
        <h2>Option 1</h2>
      </div>
      <div fxFlex="50" style="background-color: rgb(149, 155, 236); padding: 24px;">
        <h2>Option 2</h2>
      </div>
    </div>
  </div>

  <div fxFlex="25" style="background-color: rgb(164, 226, 206); padding: 24px;">
    <h2>Right Column</h2>
  </div>
</div>

和移动视图：

这就是你要找的吗？

仅限收音机试试这个：

<div fxLayout="row">
      <div fxFlex="100" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px"
        style="padding: 16px;">
        <label id="radio-group-label" fxLayoutAlign="center" style="background-color: coral;">Affrontement entre
          :</label>
        <mat-radio-group aria-labelledby="radio-group-label2" fxLayoutAlign="center">
          <mat-radio-button class="radio-button" value="s" checked="true" style="margin-right: 16px;">
            Concession à marquer
          </mat-radio-button>
          <mat-radio-button class="radio-button" value="p">Équipe à marquer</mat-radio-button>
        </mat-radio-group>
      </div>
    </div>

这是结果：屏幕和移动设备：