ionic-framework - Ionic 4 离子排填充剩余高度
问题描述
如何注释 anion-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 行填充剩余高度
但是我们可以在坚持行/列语法的同时拉伸行而不引入更多的弹性框吗?
解决方案
可以用 注释网格容器,用 注释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;
在每一行上使用这种方法。
推荐阅读
- asp.net-core - 即使用户未登录,授权属性仍会成功传递
- python - 如果特定字符串 A 出现在字符串 B 的开头和/或结尾,我们如何从 B 中删除 A?
- java - 在 Android 中使用 AR 从 2D 图像创建 3D 图像模型
- delphi - 从对象存储库继承表单
- c - 如何将数组存储在文件(数据库)中以及如何在程序中访问它
- node.js - 当前 LTS 版本 (v12.13.0) 的节点控制台日志数组长度 >= 7 并带有换行符,如何将它们记录回一行?
- google-apps-script - Google表格:有条件地将一列单元格格式化为相邻的单元格(列)
- c# - 攻击时角色正在进入地面
- python - PyQt 打印 QWidget
- python - 将信息从 MySQL 数据库打包到 tkinter 盒的最佳方式