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

Question

I am trying to align my boxes on one line, but allow wrapping and moving to column mode when the screen size is a small phone display.

I am trying to get:

Wins Losses Ties Points

as the screen shrinks:

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>

This still gives:

Wins
Losses
Ties
Points
1
2
3

This makes me wonder if the flex-layout module is working, but it is included in my 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 { }

Each of the sls-number-box simply show a title in a formatted box. However, these remain on individual lines regardless of the screen resolution.

Wins
Losses
Ties
Points

The blocks always show as if they are in a column, and never scroll up to be on the same row regardless of screen size.

The css for the number box has a set width and height of 100px. This can be removed as well if there is a way to size the block inside the flex layout as well. Note that if I remove the width and height from the CSS, then the boxes to size out to the available width, so it does appear that the flex-layout is working somewhat.

Answer 1

To achieve expected result, use below css for the child div to inline-block elements

.test div{
  display: inline-block
}

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

Working code for reference - https://stackblitz.com/edit/angular-jkdjgv?file=src/app/app.component.html