三大Flex布局用法(转载)
Flex布局基础
对于Flex 初学者,在Hello World之后,Flex布局便是下一站学习要的要义。若是从传统的Html转变而来,总希望找到类似于Div/Table/UL等之类的控件,也希望在 Flex中可以像Dreamweaver一样可以拖拽控件;而如果是从Windows Application程序转变而来,则可能更喜欢Absolute布局,让控件散落于页面之上,通过x/y控制其坐标。这种做法让Html设计师觉得可 笑,但我见过有人确实用VS这么做过。
喜欢Div的朋友,可能觉得Box很亲切;喜欢用Table的设计师,对不起,Flex没有Table,Grid虽与之极像,但不宜用来布 局;Application程序员也不要图行事,使用Absolute布局,这种布局不宜开发Web应用,如果只是开发桌面版则无关紧要。
本节写了三个Demo:
◆Absolute布局
◆Hbox布局
◆VBox布局(与前者统称Box布局)
如果开发AIR程序或者桌面应用,可以选择Absolute布局;但如果开发Web应用,推荐学习、研究Box布局。右击可以查看源码。
一、Flex布局之Absolute
用Flex新建Application时,最下面有一个布局属性选项:Vertical,Horizontal,Absolute。意思如单词。若 选择Absolute,则Application的子控件依据其{x,y}坐标依靠。但不影响第二代子控件,即,如果放一个HBox到该 Application中,HBox中的控件则水平排列。Horizontal与Vertical相当于把Application做为一个水平或竖向的盒 子(Box),对子、孙控件的影响关系与Absolute类似。
查看Absolute,不难发现,可视区域的宽度是一定的,无论在何种分辨率下,何种浏览器宽度。但在Web应用中,我们不希望出现这样的效果。相 反,我们可能希望控件可以按照百分比自动调整位置。只此一条,开发Web应用,便不建议使用Absolute布局。由此便产生了方便、简单、易用的Box 布局。
二、Flex布局之Hbox
HBox让子控件按水平方向自动排列,居右、居左或居中都可以。
查看Hbox,控件与前者没有增减,同样的控件。但它可以自适应浏览器宽度。文章的标题栏部分用了一个HBox,其包涵三个子控 件:Label,Spacer与LinkButton.Spacer的宽度设为100%,这样无论Label无多少字符,多宽,都可以把 LinkButton撑到最右边。同样,也可以把它用在VBox中,则设置其高为100%。Spacer在Box布局中非常实用。
细心的朋友不难发现,这个Application的layout属性是Vertical,整个App相当于一个VBox。最下面的评论文本框与按纽也在一个HBox之内。
三、Flex布局之VBox
VBox让子控件在竖直方向上排列。top,bottom or center。
查看VBox,这个App的layout是Horiazontal,相当于一个HBox。一级控件是两个VBox,一左一右。左边与前面的HBox 对应的部分类似。右边用Panel与TitleWindow,还有Grid,Tile。Panel与TitleWindow都具有layout属性,可以 在其内部放置任何子控件,待遇与Application同。值得一提的是Tile,它可让子控件流动延伸,先在x轴上排行,满了之后再换行。 TileList与其类似。
Grid酷似html中的Table,但差别很大,也不适合做布局用。实际应用中,也常用Tile或TileList代替。
Box布局可以满足基本的项目应用,但有一些问题。譬如,文章内容要滚动显示,能不能像Html那样实现流布局?答案是可以的。Box布局只是基本的布局方法,并没有发挥Flex的长处与优势。关于State与流布局在稍后。
在商业项目开发中,Application99%都使用absolute布局,中间所用的容器间有box,tile或其它布局。
三大Flex布局用法(转载)的更多相关文章
- 理解CSS3里的Flex布局用法
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ disp ...
- Flex 布局教程转载
Flex 布局教程:语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程:实例篇 http://www.ruan ...
- Flex布局(转载)
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- Flex 布局相关用法
前言: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 就不容易实现. 2009年,W3C提出了 ...
- 转载: Flex 布局教程
demo:页面二等分 .flex-box { display: -webkit-flex; /* Safari */ display: flex; flex-direction: row; justi ...
- flex布局常见用法小结
1,display:flex 这个在父容器中声明: 2,flex-direction:row / column 默认为横向,也在父容器中设置,定义flex布局的主轴方向:一条轴为主轴,那么另一条轴自然 ...
- CSS的flex布局(转载)
我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...
- 转载《Flex 布局》
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- CSS3弹性伸缩布局(二)——flex布局
上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...
随机推荐
- 使用MySQL Migration Toolkit快速导入Oracle数据
近来笔者有项目需要将原有的Oracle数据库中的数据导入到MySQL中,经过试用发现MySQL GUI Tools中的MySQL Migration Toolkit可以非常方便快捷的将Oracle数据 ...
- Timus - 1209 - 1, 10, 100, 1000...
先上题目: 1209. 1, 10, 100, 1000... Time limit: 1.0 secondMemory limit: 64 MB Let's consider an infinite ...
- HDU - 3040 - Happy Girls
先上题目: Happy Girls Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- js的map文件
什么是source map文件 source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下. 比如压缩后原变量是ma ...
- tomcat日志采集
1. 采集tomcat确实比之前的需求复杂很多,我在搭建了一个tomcat的环境,然后产生如下报错先贴出来: Jan 05, 2017 10:53:35 AM org.apache.catalina. ...
- Java经典线程同步问题------生产者与消费者
先上代码 class Test { public static void main(String []args) { Queue q=new Queue(); Producer p=new Produ ...
- 具体解释linux文件处理的的经常使用命令
原创Blog.转载请注明出处 附上之前訪问量比較高的几篇linux博客 本人使用shell的8个小技巧 grep的九个经典使用场景 sed命令具体解释 awk命令具体解释 linux中全部的东西都是文 ...
- 使用OpenSSL做RSA签名验证 支付宝移动快捷支付 的server异步通知
因为业务须要.我们须要使用支付宝移动快捷支付做收款.支付宝给了我们<移动快捷支付应用集成接入包支付接口>见支付宝包<WS_SECURE_PAY_SDK>. 支付宝给的serve ...
- Mysql经常使用函数汇总
一. 聚合函数 1.1 求和函数-----SUM() 求和函数SUM( )用于对数据求和.返回选取结果集中全部值的总和. 语法:SELECT SUM(column_name) FROM table_n ...
- phpfpm的配置
1.php中fastcgi和php-fpm是什么东西 最近在研究和学习PHP的性能方面的知识,看到了factcgi以及php-fpm,发现我对他们是少之又少的理解,可以说几乎是一无所知,想想还是蛮可怕 ...