将 Div 项目与 flex-layout (fxlayout) 对齐无效
align Div item with flex-layout (fxlayout) not working
我正在尝试调整我的 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 的 link:
https://angular-testtable.stackblitz.io/
https://stackblitz.com/edit/angular-testtable?file=src%2Fapp%2Fconcession.component.html
这是我希望我的页面看起来像的“示例”:
(我用 flex 尝试了很多东西,但我无法得到图像中显示的结果)
感谢您的帮助。
弹性布局的新手。
我正在测试你的问题,因为我很感兴趣,结果如下所示。
密码是:
<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>
这是结果:屏幕和移动设备:
我正在尝试调整我的 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 的 link: https://angular-testtable.stackblitz.io/ https://stackblitz.com/edit/angular-testtable?file=src%2Fapp%2Fconcession.component.html
这是我希望我的页面看起来像的“示例”:
(我用 flex 尝试了很多东西,但我无法得到图像中显示的结果)
感谢您的帮助。
弹性布局的新手。
我正在测试你的问题,因为我很感兴趣,结果如下所示。
密码是:
<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>
这是结果:屏幕和移动设备: