Ionic 4 离子排填充剩余高度

Question

如何注释ion-row 以填充剩余空间？

对于以下示例，黄色行“内容”应展开，直到占用所有剩余（绿色）空间。

<ion-grid style="background-color: green; height: 100%;">
  <ion-row>
    <ion-col text-center style="background-color: purple;">
      <p>Example text</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-center style="background-color: yellow">
      <p>Content</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-center style="background-color: blue;">
      <p>Example text</p>
    </ion-col>
  </ion-row>
</ion-grid>

类似的问题被问到 Bootstrap 并用 flex-grow 解决。见：Bootstrap 4 row fill remaining height

但是我们可以在坚持 th row/col 语法的同时拉伸行而不引入更多的 flexbox 吗？

Answer 1

可以用display: flex; flex-flow: column注释网格容器，用flex-grow: 1注释拉伸行。

<ion-grid style="background-color: green; height: 100%; display: flex; flex-flow: column;">
  <ion-row>
    <ion-col text-center style="background-color: purple;">
      <p>Example text</p>
    </ion-col>
  </ion-row>

  <ion-row style="flex-grow: 1;">
    <ion-col text-center style="background-color: yellow">
      <p>Content</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-center style="background-color: blue;">
      <p>Example text</p>
    </ion-col>
  </ion-row>
</ion-grid>

然后它看起来像这样：

当网格被压缩（而不是被拉伸）时，行在彼此内部移动。为了防止这种情况在每一行使用flex-shrink: 0;。