如何在 Angular/PrimeNG 14 中获得水平和垂直拉伸？答案

【问题标题】：How do I get horizontal and vertical stretch in Angular/PrimeNG 14?如何在 Angular/PrimeNG 14 中获得水平和垂直拉伸？
【发布时间】：2022-09-20 18:46:02
【问题描述】：

我需要一个水平和垂直延伸的 Angular/Primeng 14 中的网格。我从 this stackblitz 开始，它在 Angular 14 下被破坏。水平拉伸是可行的，但为了获得垂直拉伸，我求助于 this from years ago。这是结果，它有效。它垂直和水平延伸：

我怀疑这是使用 Angular/PrimeNG 14 的正确方法。我还没有见过像这样不规则网格的 stackblitz，不幸的是，我尝试过的每个 stackblitz 在 Angular 14 下都被破坏了。

在 Angular/PrimeNG 14 中获得垂直和水平拉伸的正确方法是什么？

以下是 html 和样式（取自 broken stackblitz 的样式：

<h5>Grid Demo</h5>

<div class="vertical-container" style="height: 85vh;">
<div class="grid flex" style="height: 50%;">
  <div class="col-4 row" style="height: 100%;">
    <div class="box box-stretched">
      0,0
    </div>
  </div>
  <div class="col-8"  style="height: 100%;">
    <div class="box box-stretched">
      0,1
    </div>
  </div>
</div>
<div class="grid flex" style="height: 50%;">
  <div class="col-4">
    <div class="box box-stretched">
      1,0
    </div>
  </div>
  <div class="col-8">
  </div>
</div>
</div>



styles: [
    `
      .box {
        background-color: var(--surface-e);
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 4px;
        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
          0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
      }

      .box-stretched {
        height: 100%;
      }

      .vertical-container {
        margin: 0;
        height: 100%;
        background: var(--surface-d);
        border-radius: 4px;
      }
    `
  ]

【问题讨论】：

标签： css grid primeng angular14

【解决方案1】：

看看PrimeFlex，你应该实现你的目标混合弹性收缩和弹性方向类

【讨论】：