如何解决在Angular应用中使用Flex布局时遇到问题
这是我的网页设计代码,我希望看到的东西像下面的第一个图片,但是结果是下面的第二个图片:
<div fxLayout="column" fxLayoutAlign="center start" fxLayoutGap="0.1vw" dir="rtl" class="main-container" >
<div fxFlex="30" >
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="1vw" class="header-container">
<div fxFlex="50" >
<img src={{homelogoImageAddress}} style="width: 10vw; height: 6vw;margin-right: 0.5vw; margin-top: 0.5vw;">
</div>
<div fxFlex="50" >
<h1 class="name-logo">{{'logoName' | transloco}}</h1>
</div>
</div>
</div>
<div fxFlex="65">
<div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="1vw" class="center-container" >
<div fxFlex="30" >
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="1vw" class="toolbar">
<div fxFlex="10">
<a routerLink="/news"><button class="toolbar-button">
<img src="{{address + 'news.png'}}" class="image-size" />
{{'News' | transloco}}
</button></a>
</div>
<div fxFlex="10">
<a routerLink="/shop"><button class="toolbar-button"
(click)="clickProtected()">
<img src="{{address + 'buy.png'}}" class="image-size" />
{{'Shop' | transloco}}
</button></a>
</div>
<div fxFlex="10">
<a routerLink="/digitalCurrency"><button class="toolbar-button" >
<img src="{{address + 'bitcoin.png'}}" class="image-size"/>
{{'digitalCurrency' | transloco}}
</button></a>
</div>
<div fxFlex="10">
<a routerLink="/strategy"><button class="toolbar-button"
(click)="clickProtected()" >
<img src="{{address + 'robot.png'}}" class="image-size" />
{{'buildRobot' | transloco}}
</button></a>
</div>
<div fxFlex="10">
<a routerLink="/arEngine"><button class="toolbar-button" >
<img src="{{address + 'engine.png'}}" class="image-size"/>
{{'ArtificialIntelligenceEngine' | transloco}}
</button></a>
</div>
<div fxFlex="10">
<a routerLink="/portfolio"><button class="toolbar-button">
<img src="{{address + 'bascket.png'}}" class="image-size"/>
{{'smartBascket' | transloco}}
</button></a>
</div>
<div fxFlex="10">
<a routerLink="/tutorial"><button class="toolbar-button">
<img src="{{address + 'learning.png'}}" class="image-size"/>
{{'training' | transloco}}
</button></a>
</div>
<div fxFlex="10">
<a routerLink="/adforum"><button class="toolbar-button" >
<img src="{{address + 'chat.png'}}" class="image-size"/>
{{'AnalysisAndDiscussionForum' | transloco}}
</button></a>
</div>
<div fxFlex="10">
<a routerLink="/facilities"><button class="toolbar-button" >
<img src="{{address + 'facilities.png'}}" class="image-size"/>
{{'facilities' | transloco}}
</button></a>
</div>
</div>
</div>
<div fxflex="65" class="divImg"><img src={{homeImageAddress}} >
<div class="ImgText" *ngIf="message">{{'guardMessage' | transloco}}</div>
<div class="form" *ngIf="!isLoggedIn">
<form novalidate #lForm = "ngForm" [formGroup]="logInForm" >
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="0.25vw">
<div fxFlex>
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="0.25vw">
<div fxFlex="70" *ngIf="signUpResult">{{'signUpResult' | transloco}}</div>
<div fxFlex>
<mat-form-field appearance="outline" style="width: 11.5vw;">
<mat-label>{{'email' | transloco}}</mat-label>
<input matInput formControlName = "email"
type="text" [placeholder]="'email' | transloco" email required>
<mat-error *ngIf="formErrors.email">{{formErrors.email}}</mat-error>
</mat-form-field>
</div>
<div fxFlex>
<mat-form-field appearance="outline" class="homeIcon">
<mat-label>{{'password' | transloco}}</mat-label>
<input matInput [placeholder]="'password' | transloco"
[type]="hide ? 'password' : 'text'" formControlName="password" required>
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
<mat-error *ngIf="formErrors.password">{{formErrors.password}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div fxFlex>
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="1.5vw">
<div fxFlex><button class="primaryButton" (click)="onSubmitLogInForm()">{{'login' | transloco}}</button></div>
<div fxFlex></div>
<div fxFlex><button class="primaryButton" (click)="onSubmitSignUpForm()">{{'signup' | transloco}}</button></div>
<div fxFlex></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
我不明白问题出在哪里,应该如何解决?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。