通常在Flex种有两种形式的容器:布局和导航。

在容器中我们可以同时设置一些空间和子容器,我们可以叫在容器内定义的任何组件为该容器的孩子。

在一个Flex程序的根部是一个叫做Application Container的容器,代表整个Flash Player的画图面板,这个容器用来装载该程序中其他所有的控件和子容器。

不同的容器定义了不同的布局规则:

     除了Canvas容器外,其他所有的容器都自持自动(automatic)布局,在这种类型的布局中,我们不需要去举止指定一个组件的坐标(x,y),相反,我们可以通过调整容器的各种属性去布局,如调整子组件之间的位置顺序,如果设置一些容器得子属性,如gaps,或者设置一个Spacer子控件等。举个例子,我们可以用HBox来让子控件呈水平排列。

Canvas容器采用的是绝对布局形式,这样我们可以随意指定一个子组件的X和Y坐标,另外我们也可以用constraints-base布局来控制离父容器的边距,底线和中心点。

布局容器:用来控制子组件的大小和位置,比如Grid布局容器规定了其子组件的形式就像HTML中的table一样,而DividedBox容器在中间有一条分界线,可以让用户随意拖动分界线来改变分界线两侧区域的大小。而TitleWindow容器也提供一个bar,她能包含标题和状态的信息。

导航容器: 主要提供导航让用户选择各种功能,如菜单容器,tab容器等

容器名

类型

简介

Accordion

导航

将不同类型的信息放入一系列定义好的panel中,在任何时间内总是有一个panel处在激活状态

ApplicationControlBar

布局

用来存放子组件并提供全局导航和各种应用程序的命令。可以被放在一个Application容器的最顶端。

Box (HBox and VBox)

布局

以水平或者垂直的方式布局子组件。

Canvas

布局

该容器中的子组件必须明确的给定坐标位置。

ControlBar

布局

可以将子组件放置在一个panel或者TitleWindow的下边缘。

DividedBox (HDividedBox VDividedBox)

布局

水平或者垂直的布局其子组件,类似Box容器,只是其中多了一条水平或者垂直的分界线将容器分割成两个区域。

Form

布局

可以用来设计一个表单

Grid

布局

可以布局一个类似HTML table的形式

Panel

布局

显示一个title bar,一些说明,边框和一些子组件

TabNavigator

导航

可以设置许多tab,选择不同的tab选项卡可以切换到不同的内容区域。

Tile

布局

有点类似grid 可以指定行数和列数。

TitleWindow

container

布局

类似一个window窗口,有关闭按钮,标题栏,菜单栏等。

ViewStack

导航

一个类似栈的导航容器

VBox 
垂直布局子标记;一个子标记在前一个子标记的下方显示。
HBox
横向布局子标记;一个子标记在前一个子标记的右面显示。 
Canvas 
子标记显示坐标(x,y)由开发人员指定。如果没有特别指定,所有的子标记坐标默认为容器的左上角(0,0)。例如,如果你添加一个按钮控件到Canvas容器,按钮将在这个Canvas的(0,0)坐标显示。 
Application 
可以有多种布局方式,默认为Canvas方式,具体的布局方式由该标记的“layout”属性指定。layout属性有三个选项:horizontal / vertical / absolute。分别对应HBox,VBox,Canvas三种规则。
 Tile 
子标记以行列方式布局,可以认为是一个表格,但与之区别的是,所有的格子都有相同的宽度和高度,他们是由Flex自动调整的,direction属性可以指定tile布局的方向,默认为横向。 
Panel 
Box容器的子类,通过layout属性指定具体的布局方式,默认为absolute;Panel容器除了用来包容子标记,还常用于提供标题栏和状态栏区域。 
ControlBar
ControlBar容器用于停靠工具栏,通过direction指定方向。一般用在Panel容器或者TitleWindow容器的底部。(实验证明,在Flex3中么有direction这个属性,只能是
ApplicationControlBar
根据direction属性,可以拥有HBox或者VBox的布局行为。用来包含哪些能够在应用程序全局访问的标记(我想,指的是用户UI的可访问性,不会被其他元素遮盖),如果指定为<mx:Application>标记的第一个元素,并且它的dock属性指定为true,则flash player将在屏幕的顶端绘制application controll bar,并且不会随着application的滚动而滚动。

flex容器解析的更多相关文章

  1. CSS3 flexbox 布局 ---- flex 容器属性介绍

    flexbox布局是CSS3中新增的属性,它可以很轻松地帮我们解决掉一些常见的布局问题,比如导航栏. 我们用普通的方法写导航栏,通常会在ul, li 结构写好后,让li 元素左浮动,然后再给ul 清浮 ...

  2. Java容器解析系列(0) 开篇

    最近刚好学习完成数据结构与算法相关内容: Data-Structures-and-Algorithm-Analysis 想结合Java中的容器类加深一下理解,因为之前对Java的容器类理解不是很深刻, ...

  3. 微信小程序flex容器属性详解

    flex容器属性详解 flex-direction决定元素的排列方向 flex-wrap决定元素如何换行 flex-flow 是 flex-direction 和flex-wrap的简写 justif ...

  4. [CSS七分钟系列]都1902年了,还不知道用margin:auto给flex容器内元素分组?

    最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子 日常业务迭代过程中,flex已经是前 ...

  5. flex容器属性(一)

    一,概念 flexible box ,意为"弹性布局",用来为盒状模型提供最大的灵活性. 块级布局更侧重于垂直方向,行内布局更侧重于水平方向,于此相对的,弹性盒子布局算法是方向无关 ...

  6. Flex 容器基本概念

    申明文章出处:http://www.adobe.com/cn/devnet/flex/articles/flex-containers-tips.html Flex 4 容器可以提供一套默认的布局:B ...

  7. weui.css中flex容器下子项目的水平和垂直居中

    想用weui.css写微信平台的页面,发现没有让flex(weui-flex)容器下,子项目(weui-flex__item)居中的类. 百度了一下,是用justify-content:center; ...

  8. flex词法解析

    例子1.从标准输入的字数.单词.行数统计 %{ #include <string.h> int chars = 0; int lines = 0; int words = 0; %} %% ...

  9. 小程序flex容器

    flex:默认:水平方向是主轴,垂直方向是交叉轴,分布在第四象限,项目时在主轴方向上排列, 排满之后在交叉轴方向上换行: 1.设置容器的属性 display:flex 通过设置坐标轴来设置项目的排列方 ...

随机推荐

  1. mosquitto在Linux环境下的部署/安装/使用/测试

    mosquitto在Linux环境下的部署 看了有三四天的的源码,(当然没怎么好好看了),突然发现对mosquitto的源码有了一点点感觉,于是在第五天决定在Linux环境下部署mosquitto. ...

  2. Unix/Linux环境C编程入门教程(33) 命令和鼠标管理用户和组

    Linux是一个多用户.多任务的实时操作系统,允许多人同时访问计算机, 并同时运行多个任务.UNIX系统具有稳定.高效.安全.方便.功能强大等诸多优点,自20世纪70年代开始便运行在许多大型和小型计算 ...

  3. python刷取CSDN博文访问量之三

    python刷取CSDN博文访问量之三   作者:vpoet 注:这个系列我只贴代码,代码不注释.有兴趣的自己读读就懂了,纯属娱乐,望管理员抬手若有转载一定不要注明来源 #coding=utf-8 i ...

  4. POJ 2579 Fiber Network(状态压缩+Floyd)

    Fiber Network Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3328   Accepted: 1532 Des ...

  5. centos directory server

    http://www.aliyun.com/zixun/content/3_12_517262.html CentOS系统安装Directory Server 8.1操作方法 发布时间:2014-12 ...

  6. 【转】通过 ulimit 改善系统性能

    概述 系统性能一直是一个受关注的话题,如何通过最简单的设置来实现最有效的性能调优,如何在有限资源的条件下保证程序的运作,ulimit 是我们在处理这些问题时,经常使用的一种简单手段.ulimit 是一 ...

  7. Unity 人物跟谁手指的移动(第一种方式)

    长夜漫漫无心睡眠,敲敲代码,越敲越来劲! 我发现好多小朋友都在玩熊出没之xxxx这个游戏,居然打了一下午都没玩通第2关,我把测试也叫来陪我一起玩! 结果他也打不通,我再去叫策划,他也没打过,我去叫主管 ...

  8. uva 714 - Copying Books(贪心 最大值最小化 二分)

    题目描写叙述开头一大堆屁话,我还细致看了半天..事实上就最后2句管用.意思就是给出n本书然后要分成k份,每份总页数的最大值要最小.问你分配方案,假设最小值同样情况下有多种分配方案,输出前面份数小的,就 ...

  9. Mac神器Iterm2的Shell Integration的用法和注意事项

    在iterm2 v3.0版本中有了个新的feature——Shell Integration,其中比较重要的功能就是可以取代传统的“rz”.“sz”(即:向服务器上传.下载文件) 具体的用法可以参见官 ...

  10. 动态根据checkbox 增加Dom

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" ...