Angular Flex 无法将项目放在同一行，Angular 8.2.1 和 Flex-Layout 8.0.0.beta 26

Question

我正在尝试将我的框对齐在一行上，但允许在屏幕尺寸较小时换行并移动到列模式 phone 显示。

我正在尝试获取：

Wins Losses Ties Points

随着屏幕缩小：

Wins Losses Ties Points

HTML

<div fxLayout="row wrap">
    <div>Wins</div>
    <div>Losses</div>
    <div>Ties</div>
    <div>Points</div>
</div>

<div>
    <div *ngIf="(TeamStandings$ | async) as Data; else loading">
        <div fxLayout="row wrap" fxLayoutAlign="space-around center" fxLayout.xs="column">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
    <!-- While data is being returned via Observable, this is shown -->
    <ng-template #loading>
        Getting Data...
    </ng-template>
</div>

这仍然给出：

Wins
Losses
Ties
Points
1
2
3

这让我想知道 flex-layout 模块是否正常工作，但它包含在我的 app.module.ts

中

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';

import { MaterialModule } from './material/material.module';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        AppRoutingModule,
        BrowserModule,
        BrowserAnimationsModule,
        FlexLayoutModule,
        MaterialModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

每个 sls-number-box 只是在格式化框中显示一个标题。但是，无论屏幕分辨率如何，它们都保留在单独的行上。

Wins
Losses
Ties
Points

块始终显示为好像它们在一列中，并且无论屏幕大小如何都不会向上滚动到同一行。

数字框的 css 设置了 100px 的宽度和高度。如果还有一种方法可以在 flex 布局中调整块的大小，那么也可以将其删除。请注意，如果我从 CSS 中删除宽度和高度，那么框的大小将调整为可用宽度，因此看起来 flex-layout 确实有些工作。

Answer 1

flex 布局的工作方式（如果我错了，请随时纠正我）是这样的，例如，您的 fxLayout="row wrap" 仅适用于直接子元素。

现在，您有

<div> fxLayout="row wrap">
  <div>
    ...
  </div>
</div>

只有那一个 div（包含加载 ng-模板后的两个）会被放入该行。

像这样的东西应该可以工作：

<div fxLayout="row wrap">
  <div>Wins</div>
  <div>Losses</div>
  <div>Ties</div>
  <div>Points</div>
</div>

这会将每个子项 div 置于行弹性布局的范围内，但这并不是您实际拥有的。您需要删除内部 div（将 *ngIf 移动到外部 div？），以便组件成为控制 flex 的直接子项。或者，向该子 div 添加相同的 fxLayout 指令，这样 div 就是一个行布局...

Answer 2

为了达到预期的结果，使用下面的 css 子 div 来内联块元素

.test div{
  display: inline-block
}

<div>
        <div class="test">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>

参考工作代码 - https://stackblitz.com/edit/angular-jkdjgv?file=src/app/app.component.html

Angular Flex 无法将项目放在同一行，Angular 8.2.1 和 Flex-Layout 8.0.0.beta 26

Angular Flex cannot put items on the same line, Angular 8.2.1 and Flex-Layout 8.0.0.beta 26

html

angular

flexbox

angular-flex-layout