离子4离子行填充剩余高度

Question

如何注释一个ion-row以使其充满剩余空间？

对于下面的示例，黄色行“ Content”应展开，直到占据所有剩余的（绿色）空间为止。

<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行填充剩余高度

但是，我们可以在坚持行/列语法的同时扩展行，而不引入更多的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;在每一行上使用此方法。