使用 Angular 动态对齐两个 Flex 框

Question

在我的网络应用中，我使用 Angular 框架实现了 flexbox。这个弹性盒子的功能首先是第一个会显示在窗口上。当用户从该弹性框中单击一个特定项目时，将出现另一个弹性框。第一个弹性框将出现在应用程序的整个窗口中。当另一个出现时，第一个将自动拉伸到整个窗口的 50%。但我对 Angular 很陌生。此时我将公司列表的宽度设置为 50%，将公司详细信息设置为自动。第一个 flexbox 被拉伸，但是在调整窗口大小时，两个 flex 框的大小不相等。首先，我会撒谎以显示带有整个窗口的公司列表。并且还喜欢在出现另一个 flex（公司详细信息）时拉伸它。但是我怎样才能做到这一点。

我的代码是

CSS

.flex-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
}


.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

HTML 代码

<div fxLayout="column" fxLayoutAlign="center center" fx-offset=15>
<h2 class="dtable-h2">{{ 'A926Companies' | translate }}</h2>
</div>
<div fxLayout="row" fxLayoutAlign="start stretch">
    <div class="company-list" style="margin-top:10px;">

        <!-- create company button -->

    </div>

    <div class="company-detail" style="margin-top:10px;">

    </div>

Answer 1

这与 Angular 无关，但无论如何。

方法如下。

function addBox() {
  const container = document.querySelector('.container');
  const box = document.createElement('div');
  container.appendChild(box);
}

.container {
  background: lightgray;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.container div {
  background: teal;
  flex: 1 1 50%;
  margin: 0 6px;
  padding: 12px;
}

button {
  padding: 12px 24px;
  background: orange;
  color: black;
  border-radius: 5px;
  border: 0;
  font-weight: 700;
}

<div class="container">
  <div>
    <button onclick="addBox()">Add box</button>
  </div>
</div>

编辑

在使用Flex Layout的情况下：

<div fxLayout="row" fxLayoutAlign="start stretch">
  <div class="company-list" style="margin-top:10px;" fxFlex> </div>
  <div class="company-detail" style="margin-top:10px;" fxFlex="50%"> </div>
</div>