- 浏览: 1582915 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (571)
- Flex (301)
- AIR (5)
- ComPiere (8)
- ExtJS (15)
- SAP (0)
- jBPM (3)
- Java-Hibernate (5)
- Java-Spring (10)
- XML (2)
- java-web (30)
- db2 (2)
- websphere (4)
- Google (5)
- 虚拟机 (10)
- eclipse (8)
- Win2003 (11)
- Ubuntu (27)
- VMware (4)
- CentOS (3)
- JSON (1)
- Oracle (15)
- SilverLight (1)
- 大事记 (6)
- VirtualBox (5)
- Solaris (10)
- AIX (6)
- 云计算 (10)
- MacOS (4)
- iOS (1)
- SQLite (1)
- Activiti (1)
- jdk (5)
- hadoop (8)
- Ant (4)
- PhoneGap (2)
- JavaScript (11)
- jQuery (1)
- FireFox (1)
- HBase (2)
- sqoop (0)
- ffmpeg (7)
- mencode (0)
- jdbc (1)
- SQLServer (1)
- 组件平台 (12)
- struts2 (4)
- intellj (4)
- android (1)
- ExtJS4 (1)
- 色卡司 (1)
- Linux (3)
- ExtJS5 (1)
- zookeeper (2)
- maven (1)
- Java (6)
- vpn (0)
- squid (1)
- MySQL (2)
- webpackage (1)
- antd (1)
- lucene (1)
最新评论
-
qq_24800465:
请问这里的库从哪下载啊
ffmpeg所有的编码器(encoders) -
neusoft_jerry:
貌似这里没用到StreamingAMFChannel哦,只是用 ...
Flex BlazeDS 推送技术 -
anyone:
感谢你的博文,看了受益匪浅
记住这个IntelliJ IDEA的编译设置 -
keren:
现在还有什么应用需要用flex来开发的?
flex tree的展开,关闭,添加、删除子节点 -
neusoft_jerry:
简洁明快,好贴好贴!楼主V5!
flex tree的展开,关闭,添加、删除子节点
http://varnow.org/?p=131
首先说说Flex中的元素分类,从功能层面可以把Flex中的元素分为组件(Components)和容器(Containers)两大类:
组件 - 是指那类具有明确交互或数据展示功能的元素,例如Button、Checkbox、Datagrid、List等。
容器 - 是指那类用来放置其他元素的元素,容器往往不具有特定的交互功能,主要的功能就是容纳元素。容器再细分又可以分为布局(Layout)容器和导航(Navigator)容器,其中布局容器的功能就是用来布局界面元素的,例如Application、Panel等;导航容器主要用于进行功能性的导航,进行界面切换,例如TabNavigator等。
FLex中的布局即指布局容器的布局方式,按布局特点我这里将布局分了两大类:基础布局和特殊布局。
基础布局 - 基于layout属性和constraint-based的布局,例如Application、Panel、Canvas等容器。
特殊布局 - 基于容器的功能,不同的容器具有非常特征明显的布局方式,例如Form、Grid、HDividedBox等。
基础布局
1. layout属性
通过容器的layout属性来设置布局方式,主要包括以下几种:
(1)vertical - 从上至下依次将子元素垂直放置在单一一列中,而水平对齐方式可以通过horizontalAlign来设置,垂直对齐方式可以通过verticalAlign来设置。
(2)horizontal - 从左至右依次将子元素水平放置在单一一行中,而水平对齐方式可以通过horizontalAlign来设置,垂直对齐方式可以通过verticalAlign来设置。
(3)absolute - 通过设置每个子元素的x/y属性来定位每个子元素,而容器不会自动调整子组件的位置。
2. constraint-based
在容器的layout属性设置为absolute的情况下(Canvas除外,因为Canvas只有absoulte一种布局方式,因此Canvas默认如此),可以使用constraint-based布局。这种布局方式是通过子元素的4条侧边以及2条中心线与容器相应侧边和中心线的偏移量来决定子元素的定位的。相应的属性设置如下:
(1)left - 子元素左边离容器左侧的距离
(2)right - 子元素右边离容器右侧的距离
(3)top - 子元素顶边离容器顶部的距离
(4)bottom - 子元素底边离容器底部的距离
(5)horizontalCenter - 子元素水平中心线相对于容器水平中心线的偏移量,正数表示向容器底部方向的偏移,负数表示向容器顶部方向的偏移。
(6)verticalCenter - 子元素垂直中心线相对于容器垂直中心线的偏移量,正数表示向容器右侧的偏移,正数表示向容器左侧的偏移。
*说明:horizontalCenter、verticalCenter的优先级比其他四个属性的优先级更高,即当设置了horizontalCenter、verticalCenter,其他四个属性将被忽略。此外,Constraint-based布局必须在absolute的基础布局中才有效。由于Canvas容器的布局有且仅有absolute的,因此在Canvas中可以直接使用Constraint-based布局,而在其他容器中需要将layout属性设置为absolute后Constraint-based布局才有效,而且使用了Constraint-based布局后,设置x/y坐标将不再有意义。
特殊布局
1. Box
在absolute布局中,子元素的位置不会随着容器的大小的变化而重新调整,这在窗口大小发生变化可能会对界面的布局产生不可预料的影响,很多情况下希望子元素的位置能够随容器的大小变化而自动调整,Box布局就可以满足这个需求。Box布局分为HBox和VBox,其中HBox布局与设置容器layout为horizontal是一致的,将子元素水平排列在一行中,而VBox则是将子元素垂直排在一列中。
2. DividedBox
分为HDividedBox和VDividedBox,DividedBox会将子元素划分为一个独立的分区,并且各个分区之间会存在一条调整栏,通过调整栏用于可以手动的调整各个分区的大小。
3. Tile
与HBox类似,也会将子元素水平放置,不过不同的是tile并不将所有子元素放置在单独一行,而是在即将超过tile的宽度时进行换行。
4. Grid
与HTML中的Table很相似,可以定义行数、列数,并选择一个单元格来放置子元素。
5. Form
表单容器,用于构建表单,生成特定的表单布局。
首先说说Flex中的元素分类,从功能层面可以把Flex中的元素分为组件(Components)和容器(Containers)两大类:
组件 - 是指那类具有明确交互或数据展示功能的元素,例如Button、Checkbox、Datagrid、List等。
容器 - 是指那类用来放置其他元素的元素,容器往往不具有特定的交互功能,主要的功能就是容纳元素。容器再细分又可以分为布局(Layout)容器和导航(Navigator)容器,其中布局容器的功能就是用来布局界面元素的,例如Application、Panel等;导航容器主要用于进行功能性的导航,进行界面切换,例如TabNavigator等。
FLex中的布局即指布局容器的布局方式,按布局特点我这里将布局分了两大类:基础布局和特殊布局。
基础布局 - 基于layout属性和constraint-based的布局,例如Application、Panel、Canvas等容器。
特殊布局 - 基于容器的功能,不同的容器具有非常特征明显的布局方式,例如Form、Grid、HDividedBox等。
基础布局
1. layout属性
通过容器的layout属性来设置布局方式,主要包括以下几种:
(1)vertical - 从上至下依次将子元素垂直放置在单一一列中,而水平对齐方式可以通过horizontalAlign来设置,垂直对齐方式可以通过verticalAlign来设置。
(2)horizontal - 从左至右依次将子元素水平放置在单一一行中,而水平对齐方式可以通过horizontalAlign来设置,垂直对齐方式可以通过verticalAlign来设置。
(3)absolute - 通过设置每个子元素的x/y属性来定位每个子元素,而容器不会自动调整子组件的位置。
2. constraint-based
在容器的layout属性设置为absolute的情况下(Canvas除外,因为Canvas只有absoulte一种布局方式,因此Canvas默认如此),可以使用constraint-based布局。这种布局方式是通过子元素的4条侧边以及2条中心线与容器相应侧边和中心线的偏移量来决定子元素的定位的。相应的属性设置如下:
(1)left - 子元素左边离容器左侧的距离
(2)right - 子元素右边离容器右侧的距离
(3)top - 子元素顶边离容器顶部的距离
(4)bottom - 子元素底边离容器底部的距离
(5)horizontalCenter - 子元素水平中心线相对于容器水平中心线的偏移量,正数表示向容器底部方向的偏移,负数表示向容器顶部方向的偏移。
(6)verticalCenter - 子元素垂直中心线相对于容器垂直中心线的偏移量,正数表示向容器右侧的偏移,正数表示向容器左侧的偏移。
*说明:horizontalCenter、verticalCenter的优先级比其他四个属性的优先级更高,即当设置了horizontalCenter、verticalCenter,其他四个属性将被忽略。此外,Constraint-based布局必须在absolute的基础布局中才有效。由于Canvas容器的布局有且仅有absolute的,因此在Canvas中可以直接使用Constraint-based布局,而在其他容器中需要将layout属性设置为absolute后Constraint-based布局才有效,而且使用了Constraint-based布局后,设置x/y坐标将不再有意义。
特殊布局
1. Box
在absolute布局中,子元素的位置不会随着容器的大小的变化而重新调整,这在窗口大小发生变化可能会对界面的布局产生不可预料的影响,很多情况下希望子元素的位置能够随容器的大小变化而自动调整,Box布局就可以满足这个需求。Box布局分为HBox和VBox,其中HBox布局与设置容器layout为horizontal是一致的,将子元素水平排列在一行中,而VBox则是将子元素垂直排在一列中。
2. DividedBox
分为HDividedBox和VDividedBox,DividedBox会将子元素划分为一个独立的分区,并且各个分区之间会存在一条调整栏,通过调整栏用于可以手动的调整各个分区的大小。
3. Tile
与HBox类似,也会将子元素水平放置,不过不同的是tile并不将所有子元素放置在单独一行,而是在即将超过tile的宽度时进行换行。
4. Grid
与HTML中的Table很相似,可以定义行数、列数,并选择一个单元格来放置子元素。
5. Form
表单容器,用于构建表单,生成特定的表单布局。
发表评论
-
extjs结合flex(flash)的注意事项.
2014-01-02 17:11 2448//for fix bug //flash里使 ... -
flash(flex)crossdomain dtd规范
2013-12-27 13:38 999dtd文件位置: http://www.macromedia. ... -
flash内嵌在html里面的代码
2013-12-27 09:19 1242<!-- 除IE外都可识别 --> < ... -
FlashBuilder4.5 ADT命令详解(官方)
2011-12-16 17:45 1296http://help.adobe.com/en_US/air ... -
FlashBuilder4.5加入ADT插件
2011-12-16 17:24 1888参考: http://renaun.com/blog/2011 ... -
Flex as3commons log的简单使用
2011-11-28 20:26 1649http://www.as3commons.org/ &l ... -
Flex日志工具汇总
2011-11-27 16:29 1305巨兽 monster [能调试 mobile和web air] ... -
【转】[Flex]我经常使用的Flex Tools 和 Resource
2011-11-22 08:36 1348http://www.k-zone.cn/zblog/post ... -
[转]Flex Socket安全策略<policy-file-request/>及应对方法
2011-08-27 16:43 1784http://hi.baidu.com/dobodo/blog ... -
flash 安全策略文件
2011-08-27 16:31 2194<?xml version="1.0&qu ... -
Request请求头的格式
2011-08-27 15:38 2409每次提交http请求时,请求头是什么样的的格式呢? GET方 ... -
flash Tooltip类
2011-08-27 15:06 1183http://www.flepstudio.com/flash ... -
flash SQLite包装类
2011-08-27 15:00 2278[转]http://www.flepstudio.com/fl ... -
[转](原创)flex解决跨域问题的策略文件的写法
2011-08-04 09:59 1614http://hi.baidu.com/wosinmaiken ... -
[转](整理)flex常用验证控件
2011-08-04 08:30 1428http://hi.baidu.com/wosinmaiken ... -
Flex4.5 skin组建皮肤的应用
2011-07-28 08:52 2866http://www.iyoya.com/2011/06/04 ... -
如何成为一个合格的iOS开发者?
2011-07-17 14:59 1392转:http://www.adobe.com/cn/devne ... -
flex4.5移动设备开发-添加应用背景图片
2011-07-17 10:50 2331【转】http://spy6.blogspot.com/201 ... -
flex4.5移动设备开发-应用访问权限设置
2011-07-16 14:19 1412在构建flex4.5 mobile application的时 ... -
flex4.5移动设备开发-表格效果
2011-07-15 23:12 1860做了个实验,没想到做出表格的效果
相关推荐
小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 Flex...
在前端开发中,Flex布局(Flexible Box)是一种强大的盒模型布局方式,允许开发者轻松地创建响应式和动态的用户界面。这个"基本布局_flex基本布局模板_flex_"项目旨在介绍和提供一个基础的Flex布局模板,帮助开发者...
在现代Web开发中,Flex布局(Flexible Box布局)已经成为创建响应式、动态和灵活的用户界面的标准工具。这个“flex移动布局,极简公共样式包”正是为了方便开发者快速构建适应不同屏幕尺寸的移动端应用而设计的。让...
在Flex布局中,采用Flex布局的元素被称为Flex容器,其所有子元素则自动成为容器成员,被称为Flex项目。容器可以指定子项目沿主轴(main axis)或交叉轴(cross axis)的方向排列。 #### Flexbox属性 - **display**...
微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小...
* 在 older browser 中可能不支持 Flex 布局 * 在某些情况下,Flex 布局可能会出现布局问题 * 在使用 Flex 布局时,需要注意 float、clear 和 vertical-align 属性的失效 Flex 弹性布局是一种强大的布局方式,可以...
本源代码将研究学习微信小程序的FlexLayout布局实例,微信小程序界面设计实例,是一种流布局的实现例子,而不是大家熟悉的盒子式布局,据说即使需要深层的嵌套,FlexLayout布局的响应速度也不会超过1ms,可谓是非常...
网页布局(layout)是CSS的一个重点应用。... 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
在用了Flex布局会发现,当水平排列后,会发现所有子项的高度都变成一样的了。 这是因为Flex 布局会默认: 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽,并把所有子项的高度变为最高子项的...
flex 页面布局教程 详细介绍了页面的各个组件
在Flex布局中,通过设置`display: flex;`属性,容器将变为一个Flex容器,其子元素将遵循Flex规则。通过`flex-direction: row;`属性,我们可以使子元素沿水平方向排列,实现横向布局。此外,`justify-content`属性...
flex 弹性布局,最后一行数量不足一行 列表项目左对齐的解决办法,经过实际测试,亲自有效,一行的数量可以随意设置。非常有用!
在提供的压缩包文件中,你将找到一个名为“flex布局自创网页页面(可做网页作业)”的示例,包含了完整的HTML和CSS代码。你可以参考这个例子来进一步学习和实践Flex布局,逐步掌握这项强大的网页设计技术。
3. **Flexbox和Grid布局的结合**:在某些复杂布局中,可能会同时使用Flexbox和CSS Grid来达到最佳效果。 4. **百分比和自动值**:在`flex-basis`中使用百分比或`auto`值,能更好地适应不同屏幕尺寸和内容变化。 ...
先简单介绍一下,要使用flex布局,需要先给一个容器元素设置display:flex让它变成flex容器。 然后其所有的直接子元素就变成flex子元素了,在flex里存在两根轴,叫主轴和交叉轴,互相垂直,主轴默认水平,flex子元素...
微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip ...
2. 主轴与侧轴:Flex布局中有两个主要方向,主轴(main axis)和侧轴(cross axis)。主轴是Flex容器内元素排列的主要方向,而侧轴则是与其垂直的方向。 3. Flex-direction属性:用于定义主轴的方向。默认值为`row`...
微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——...
2. **主轴与侧轴:** Flex布局中有两个关键轴,主轴(main axis)和交叉轴(cross axis)。主轴默认是从左到右(对于从左到右的文本方向),而交叉轴则垂直于主轴,从上到下。 3. **属性调整:** Flex容器可以通过...
微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 ...