Расположение строк расположено в столбцах

Question

Я новичок в угловом флекс-макете и постараюсь создать некоторый контент со списком выбора сбоку и некоторым контентом в центре.

Вот как это должно выглядеть:

Это код:

<div fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="10px">
  <div>
    <app-navbar></app-navbar>
  </div>
  <div style="border: 1px solid black" fxLayout="row">

    <!-- sidenav -->
    <div style="background-color: chartreuse">
      Sidenav
    </div>

    <!-- content -->
    <div style="background-color: chocolate">
      Content
    </div>
  </div>

</div>

Вот как это выглядит:

Answer 1

Обнаружил проблему ... У меня были вещи в модуле внутри проекта, и модуль не имеет импорта FlexLayoutModule.Итак, после добавления этого ... flex работает довольно хорошо: -)

Answer 2

Если у вас нет несовпадающих тегов, ваш код должен работать с одним изменением добавления значений fxFlex к дочерним компонентам, чтобы они вытягивались на всю ширину компонента.

<div fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="10px">
<div>
  <h1>Header</h1>
</div>
<div style="border: 1px solid black" 
     fxLayout="row">

  <!-- sidenav -->
  <div style="background-color: chartreuse" fxFlex="50%">
    Sidenav
  </div>

  <!-- content -->
  <div style="background-color: chocolate" fxFlex="50%">
    Content
  </div>
</div>

Пример блиц-стека можно найти здесь: https://angular -flex-layout-seed-yok6td.stackblitz.io