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

Question

我正在尝试将我的框对齐在一条线上，但当屏幕尺寸为小型手机显示屏时，允许换行并移动到列模式。

我想得到：

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

要达到预期的效果，请使用下面的 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

Answer 2

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

现在，你有

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

只有一个 div（包括加载 ng-template 后两个）会被放到行中。

这样的事情应该可以正常工作：

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

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