ionic使用记录---栅格模式
来源:互联网 发布:mcu选型软件 编辑:程序博客网 时间:2024/05/02 04:26
栅格系统
ionic的栅格系统采用了CSS3的弹性盒(Flexible Box)模型,这使得它与大多数栅格系统都有所区别。
Flex布局主要思想是让容器有能力改变其子元素的宽度、高度甚至先后顺序,从而以最佳方式填充可用空间。CSS3引入Flex容器的主要目的是为了适应所有类型的显示设备和屏幕大小:
在ionic中使用栅格系统主要使用两个类:
.col : 默认的定宽列
在ionic的栅格中,每一行的各列默认是等宽的,这使得实现一个图片浏览界面非常简单。下图是instagram app的截图:
-----------------------------------------------------------.col-{width-percent} : 指定列宽
当然,我们也可以显式地指定某些列的宽度。ionic提供了一些预置的CSS类,供我们快速指定列宽:
如果你有特殊的需求,比如,非要指定78%的宽度,可以这样:
- .col-78{
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 78%;
- -moz-box-flex: 0;
- -moz-flex: 0 0 %78;
- -ms-flex: 0 0 78%;
- flex: 0 0 78%;
- }
现在清楚了,这个比例值对应的就是元素的flex-basis样式。
-----------------------------------------.col-{width-percent} : metro风格
windows phone的metro风格在信息展示方面有很大的优势,虽然携程的APP没有突出这一点:-( :
通过定制栅格的列宽,我们可以简单地实现类似的界面。
--------------------------------------.col-offset-{width-percent} : 指定列偏移
列可以从默认位置偏移,ionic预置了一些CSS类供我们快速设置列偏移:
这实际上是通过设置子元素的margin-left样式实现的,所以如果你需要让它偏移正常位置78%,可以这样:
- .col-offset-78{
- margin-left:78%;
- }
-------------------------------
.col-{align} : 列纵向对齐
如果一行中各元素的高度不一样,那么比较矮的那些元素将自动被拉伸以适应整行的高度。
有时你不想这样,希望那些元素保持自身的高度。ionic提供了一些预置的CSS类用来指定这些元素纵向的对齐方式:
这是通过设置元素的CSS3样式align-self来实现的。
0 0
- ionic使用记录----栅格模式
- ionic使用记录---栅格模式
- ionic使用记录----popup
- ionic使用记录-----.bar
- ionic使用记录----content
- ionic使用记录----button
- ionic使用记录----tabs
- ionic使用记录----列表.list
- ionic grid(栅格) 九宫格
- ionic使用记录----色彩、图标、内边距
- Ionic Grid栅格布局居中实例
- ionic使用记录------输入组件容器.item-input
- 在ionic中使用$q同步读取sqlite3记录
- ionic使用
- Ionic使用
- ionic相关名词记录
- ionic 常用记录
- ionic 2 常用记录
- SQL SERVER 导入 EXCEL “文本被截断,或者一个或多个字符在目标代码页中没有匹配项”
- 双目视觉与虚拟现实之间
- IOS Dev Intro - Opengl ES Series 01
- javascript实现的base64编码解码
- 透明度计算,百分比和十六进制关系
- ionic使用记录---栅格模式
- 仿微信上传图片功能
- 第十六周项目1:说出程序的功能,并上机验证(1)
- Weka文件读取及导出[1]
- 无器械健身,是否真的比健身房器械训练要好?
- 获得手机sdCard
- iOS 跳转到系统的设置界面
- 模式识别(Pattern Recognition)学习笔记(二十一)--再谈(人工)神经网络(ANN)
- 8个Servlet Listener