Angular Flex-Layout не переключается со строки макета на столбец

Question

Я обновился до Angular 9 и пытаюсь использовать FlexLayout. Пример компоновки angularjs .org не работает. https://material.angularjs.org/1.1.1/layout/container

Мой вывод в этом формате, который не является правильным:

     [first item in row ][first item in column ]
     [second item in row][second item in column]

вместо

    [first item in row ][second item in row][first item in column ]
    [                  ][                  ][second item in column]

Чтобы проверить это I создал простое приложение vanila angular & material 9 с модулем Flexer.

Вот мой angular шаблон приложения flexer.component. html file:

    <div layout="row">
        <div class="box1" flex>First item in row</div>
        <div class="box2" flex>Second item in row</div>
    </div>
    <div layout="column">
        <div class="box1" flex>First item in column</div>
        <div class="box2" flex>Second item in column</div>
    </div>

Здесь мой файл vanila angular app flexer.component.ts:

    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-flexer',
      templateUrl: './flexer.component.html',
      styleUrls: ['./flexer.component.scss']
    })
    export class FlexerComponent implements OnInit {

      constructor() { }

      ngOnInit() {
      }

    }

Вот мой файл стиля flexer flexer.component.s css:

    :host {
        display: flex;
        width: 100%;

        .box1 {
            color: black;
            background-color: skyblue;
        }

        .box2 {
            color: white;
            background-color: rgb(78, 47, 255);
        }

    }

Вот мой output

В конце концов я хотел, чтобы мой второй контейнер div показывался под первым, как это:

    [first item in row ...                      ]
    [second item in row...                      ]
    [first item in 1scolumn][second item in 2nd column]

Оценил любую помощь, извините, у меня нет живая демонстрация angular9 для отображения этого типа plunker или stackblitz, которого еще нет в версии 9.

Answer 1

Вы должны добавить fx префикс перед каждой директивой layout и flex.

Ваш шаблон должен быть:

<div fxLayout="row">
  <div class="box1" fxFlex>First item in row</div>
  <div class="box2" fxFlex>Second item in row</div>
</div>
<div fxLayout="column">
  <div class="box1" fxFlex>First item in column</div>
  <div class="box2" fxFlex>Second item in column</div>
</div>

Но также обратите внимание, что вы можете использовать Grid с gd префиксными директивами:

<div gdColumns="1fr 1fr 1fr">
  <div class="box1" gdColumn="1" gdRow="1">First item in row</div>
  <div class="box2" gdColumn="2" gdRow="1">Second item in row</div>
  <div class="box1" gdColumn="3" gdRow="1">First item in column</div>
  <div class="box2" gdColumn="3" gdRow="2">Second item in column</div>
</div>

В этом случае результат будет лучше соответствовать вашим ожиданиям:

[first item in row ][second item in row][first item in column ]
[                  ][                  ][second item in column]

, поскольку с Grid вы проектируете сетку с 3 отдельных столбца и 2 строки ditcint. Может быть хорошей альтернативой в зависимости от ожидаемого результата.

Важное примечание

Не забудьте импортировать FlexLayoutModule в AppModule.

Демо

Вот демо Stackblitz