css - 带有 Angular 2 的 Flexbox 列

Question

我正在尝试使用 flexbox 制作高度为 100% 的 UI 布局。问题是，这是一个 Angular 2 应用程序，因此添加了我实际上无法控制的元素。

Here's my demo .如您所见，在每个 .tab div(您可以将其视为页面)内，还有另一个以编程方式隐藏的 div。当这个内部 div 被隐藏时，我希望父 div 也被有效隐藏，允许可见的 .tab 占据整个剩余高度。

<div class="foo">
  <header>A</header>
  <main>B</main>
  <nav>
    <div class="tab">
      <div style="display: none;">Foo</div>
    </div>
    <div class="tab">
      <div>Bar (I want this at the top)</div>
    </div>
    <div class="tab">
      <div style="display: none;">Baz</div>
    </div>
    <ul>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
    </ul>
  </nav>
</div>

由于 Angular 2 组件的工作方式，我的 HTML 并不是很灵活。我怎样才能实现我想要的行为？

Answer 1

使用指令作为:

*ngIf, *ngClass, *ngStyle

控制 DOM 中的样式和可见性。

<div *ngIf="isActive === first" class="tab">
  <div style="display: none;">Foo</div>
</div>
<div *ngIf="isActive === second" class="tab">
  <div>Bar (I want this at the top)</div>
</div>
<div *ngIf="isActive === third" class="tab">
  <div style="display: none;">Baz</div>
</div>