gpt4 book ai didi

ionic-framework - Ionic 4 ionic 排填充剩余高度

转载 作者:行者123 更新时间:2023-12-04 14:38:11 33 4
gpt4 key购买 nike

如何注释 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>

Colorful row example

类似的问题被问到 Bootstrap 并通过 flex-grow 得到解决。见: Bootstrap 4 row fill remaining height

但是我们可以在坚持行/列语法的同时拉伸(stretch)行而不引入更多的弹性框吗?

最佳答案

可以使用 display: flex; flex-flow: column 注释网格容器和带有 flex-grow: 1 的拉伸(stretch)行.

<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>

然后它看起来像这样:
solution

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

关于ionic-framework - Ionic 4 ionic 排填充剩余高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53638356/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com