Ionic framework 离子4离子排填充剩余高度

如何注释

离子行

，使其填充剩余空间

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

<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解决了这个问题。见：

---

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

可以使用

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每行。
如果它们是更好的方法，我很乐意投票/接受它们。因为我的解决方案是将一个
display:flex
放到网格上。向你致敬，感谢你没有把答案留给自己，而是把它放在那里。