flex数据交互 方式
flex——弹性布局的属性及使用
1.父元素id为flex,子元素class为items#flex {width: 100%;height: 100%;display: flex;padding:15px;padding-top: 200px;border: 1px solid red;box-sizing: border-box;}#flex .items {width: 18%;border: 1px solid blue;height: 200px;}效果如下图2.flex-direction 在flex容器里的所有的block元素的流动方向row 默认，从左到右column 从上到下row-reverse 从右到左column-reverse 从上到下父元素添加flex-direction: row;父元素添加flex-direction:row-reverse父元素添加flex-direction:column父元素添加flex-direction:column-reverse3.flex-wrap 控制如果当前行的位置不足时，是否换行，默认是不换行，会一直在一行中挤压，会改变在该行元素的宽度，将其排在一行之中nowrap 不换行wrap 换行，空间不足，就向下另起一行。
wrap-reverse 换行，与wrap不同的是，这个是向当前行的上面另起一行。
注意：flex-direction和flex-wrap经常一起使用所有有个缩写属性flex-flow:flex-direction flex-wrap。
父元素添加flex-flow:row nowrap;父元素添加flex-flow:row wrap;父元素添加flex-flow:row wrap-reverse;4.justify-content主轴的对齐方式，元素在容器中的对齐方式，与左对齐，右对齐，居中对齐类似取值：flex-start 靠近主轴的开始方向，如果从左到右就靠左，相反就靠右。
Flex框架介绍
Flex 开发框架介绍框架介绍Flex语言包含了一个丰富的用户界面组件库，MXML（一种基于XML的标记语言）和ActionScript（面向对象编程语言）。
MXML用于排布用户界面和处理应用中其他方面的问题，而ActionScript用来处理用户交互逻辑。
这些应用程序利用Adobe® Flash® Player 和Adobe AIR® 运行时跨浏览器、桌面和操作系统实现一致的部署。
公司开发框架通过AS语言和MXML相结合的MVC模式的框架。
Flex开发可以分模块开发，最后统一加载到主页（Main application）上，每个Flex工程都有一个主页面。
这样开发降低了各个模块之间的耦合性。
与JAVA服务端交互可以通过json或xml数据格式。
模块：模块开发住要有以下几个部分组成：Model : 组件之间所有的传递的信息和数据，这是一个Bindable（可绑定的）对象。
Controller：控制页面请求，调用Service （JA V A端服务），与Model 组件数据交互。
Ui：显示从服务端获取的数据。
相关代码：Model在Model代码中，定义的public的变量，用来存放由数据库获取数据，和需要与服务器交互的参数，几乎所有的服务层返回的信息都需要在Model中有一个相应的对象。
绑定当数据属性改变时，Flex自动复制源属性的值到任何目标属性。
Controller：调用服务端，保存返回数据。
UI：框架主要配置类：UrlProperties.as 配置服务器路径，及各个模块需调用的actionModuleLibrary 模块管理。
DEMO：http://192.168.0.20:8080/sunristerFramework/webmasterfront/sunristerFlexFrame.ht mlSvn相关文档：svn://192.168.0.102/2010/framework/Flex源代码：svn://192.168.0.102/2010/framework/SRC/sunristerFlexFrame。
html中flex的用法
html中flex的用法一、Flex布局简介HTML中的Flex布局是一种CSS弹性布局，它允许开发者更轻松地创建响应式布局，使得网页元素能够更加灵活地适应不同的屏幕尺寸和设备类型。
Flex布局提供了更直观的布局方式，能够轻松实现元素的水平和垂直对齐，以及灵活的弹性伸缩。
二、Flex布局的基本概念在HTML中使用Flex布局，需要使用`display`属性将元素设置为`flex`。
这样，元素及其子元素就会按照Flex布局进行排列。
在Flex 布局中，主要涉及以下几个属性：1.`flex-direction`：用于控制主轴的方向，用于指定行或列的方向。
2.`flex-wrap`：用于控制是否允许Flex容器换行。
3.`justify-content`：用于控制主轴上的对齐方式。
4.`align-items`：用于控制垂直对齐方式。
5.`align-content`：用于实现行与行之间的对齐方式，当Flex 布局需要换行时，该属性就变得非常重要。
三、Flex布局的用法示例下面是一个简单的HTML示例，展示了如何使用Flex布局：```html<!DOCTYPEhtml><html><head><style>.container{display:flex;flex-direction:column;align-items:center;height:100vh;}.child{width:50%;margin:10px;}</style></head><body><divclass="container"><divclass="child">Child1</div><divclass="child">Child2</div><divclass="child">Child3</div></div></body></html>```在上面的示例中，我们创建了一个名为`.container`的Flex容器，它包含三个子元素（`.child`）。
偷菜类游戏FLEX
哈尔滨师范大学学年论文题目基于FLEX的偷菜游戏设计学生刘子甲指导教师周国辉教授年级2008级专业数字媒体技术系别计算机系学院计算机信息与工程学院哈尔滨师范大学2010年 5论文提要近年来，随着计算机信息技术的告诉发展，人们物质文化的不断提高，一些偷菜养成类的网页游戏也开始走进我们的生活。
偷菜类游戏是基于FLEX体系，服务器一般用C/C++或JA V A来实现，前端用FLASH,AS3 来实现，并通过链接数据库，从而制作出丰富多彩的偷菜类游戏。
由于每台电脑都安装了FLASH PLAYER的相应版本，因此通过这种体系制作的游戏可以不用安装第三方插件，方便用户，也节省了开发所需的成本。
对于偷菜游戏的设计，主要是主界面、土地、工具栏、好友数据几方面来设计，然后再把相应模块添加进来，进行相应的调试，最终形成可供娱乐的偷菜游戏。
关于偷菜类游戏设计的几个问题刘子甲摘要：随着编程语言种类的不断发展，应用软件的不断增多，选择合适的编程工具来完成相应的目的会很大程度上成为减少成本、提高效率。
对于富互联网时代的来临，选择FLEX来制作偷菜类游戏成为了网页游戏编程人员不二的选择。
对于一些制作方面的技术问题，需要我们不断的探索和改进。
关键词：FLEX偷菜类游戏富互联网近年来，伴随着富互联网时代的来临，网页游戏也逐渐成为了游戏中一个不可替代的角色，人人网的开心农场、腾讯的QQ农场以及一些相关类型的游戏如雨后春笋般出现。
这使我们不得不对该类游戏的相关技术进行探索，从中总节和改进相关的技术环节，来达到熟练掌握该类游戏的制作流程，充实自己的编程经验和能力的目的。
一、为什么要选择FLEX体系来制作偷菜类游戏？FLEX是ria技术的主要倡导者macromedia公司于2004年发布，是为了满足ria企业级开发而推出的表示层服务器和应用层框架。
主要采用mxml界面语言和actionscript脚本语言。
FLEX的出现开启了ria（rich internet application）富互联网应用的时代。
FLEX简介
Tony
© Copyright, Suzsoft Co., Ltd. Confidential and Proprietary Information. All Rights Reserved.
1
第一部分：
走近Flex
02:13
© Copyright, Suzsoft Co., Ltd. Confidential and Proprietary Information. All Rights Reserved.
02:13
© Copyright, Suzsoft Co., Ltd. Confidential and Proprietary Information. All Rights Reserved.
9
02:13
© Copyright, Suzsoft Co., Ltd. Confidential and Proprietary Information. All Rights Reserved.
2
什么是Flex？
Flex是一个针对企业级富互联网应用的表示层 解决方案。 富互联网应用程序（Rich Internet Application， RIA），传统的网络程序由HTML语言来标记表 现层，只适合图文，形式上受限。RIA具有强 交互性，表现内容丰富。 swf，一种RIA表现形式。 Flex，用编译器来生成swf，实现Web应用 （Flash Player）。
02:13
© Copyright, Suzsoft Co., Ltd. Confidential and Proprietary Information. All Rights Reserved. 16
MXML文件结构（3）
flex布局详解
flex布局详解flex布局详解说明flex 布局是CSS3中新增加的⼀套布局⽅案，属于⼀维布局模型。
flex提供了强⼤的空间分布和对齐能⼒。
想要理解和使⽤flex进⾏⽹页布局，需要先来学习和理解下⾯的⼏个概念：flex的两根轴线: 主轴和交叉轴flex容器和flex⼦元素基本概念的解释flex的两根轴线当使⽤flex进⾏布局的时候，⾸先需要了解的，就是flex的两根轴线：主轴和交叉轴。
为什么⼀定要理解这两个轴线呢，因为所有的flex属性都和这两根轴线有关系。
⼀般来说，元素在容器内部排列的顺序都是按照从左向右的顺序来进⾏排列的，⽽在flex中，决定元素排列的是主轴。
默认情况下flex中主轴上的元素排列⽅式和⾮flex情况下是⼀样的。
flex的特性，就是元素沿着主轴或者交叉轴进⾏排列。
flex容器和flex⼦元素想要使⽤flex布局⽅案，需要在容器属性上使⽤display:flex或者display:inline-flex。
⽽⼀旦设置了任意⼀个属性，那么这个标签就变成了flex容器，也可以称之为是弹性容器。
⽽相对应的，容器当中的⼦元素就变成了flex⼦元素也就是弹性⼦元素。
flex 的相应属性分类想要更⾼的学习和使⽤flex布局，需要了解flex中包含的属性。
⼀般来说，flex的属性可以分成两类:flex容器属性(flex-container)flex⼦元素属性(flex-item)所谓的flex容器属性就是将属性设置在flex容器上，⽽flex⼦元素则是将属性设置在⼦元素的⾝上。
flex容器属性flex-direction通过flex-direction属性，可以设置主轴的⽅向，它包括下⾯的⼏个值:row(默认值): 主轴为⽔平⽅向，项⽬排列起点在左端。
row-reverse: 主轴为⽔平⽅向，起点在右端。
column: 主轴为垂直⽅向，起点在上沿。
column-reverse: 主轴为垂直⽅向，起点在下沿。
visual modflow flex 9.0用户手册中文版_第二章
2程序概览为了在Visual MODFLOW Flex环境中变得最高效和有效，建议您熟悉一些简单的概念、术语，以及您可以找到和访问这些内容的位置。
数据对象所有您在 Visual MODFLOW Flex 中与之交互的数据都被称为数据对象。
这些可以包括：原始数据从折线或多边形的形状文件、电子表格中的井、Surfer .GRD 格式的地表等导入。
通过数字化点、多边形或折线，或通过插值点创建表面。
概念数据对象:这些对象是在你进行概念建模工作流程时生成的，包括：Horizons, Structural Zones, Property Zones, and Boundary Conditions.数值模型数据对象：这些是在数值建模工作流程中生成的，包括：输入：数值网格、属性（渗透系数、初始水头等）、边界条件（一组河流单元、排水单元、抽水井单元等）、观测井、区域预算区以及粒子。
输出：计算得到的水头、地下水位降、路径线等。
每个数据对象旁边都会有一个复选框，允许将其显示在不同的2D/3D查看器中。
数据对象可以重新排序、重命名或分组到数据文件夹中。
要创建一个数据文件夹，在数据对象浏览器中右键单击，然后选择新建文件夹。
数据文件夹可以重命名。
每个数据对象还具有设置，可以通过在树中右键单击数据对象并选择“设置”来访问。
这些设置提供对一般属性（统计信息、文件来源等）和样式设置（符号颜色、形状、标注等）的访问，用于在活动查看器中显示的对象。
更多详情，请参阅数据设置。
在 Visual MODFLOW Flex 中，许多向导和对话框需要您从“数据浏览器”或“概念模型浏览器”中选择数据对象，例如在定义地层、创建属性区域以及为边界条件分配属性时。
当你在对话框或向导中看到一个位于输入字段旁边的蓝色箭头 时，这意味着需要选择一个数据对象。
只需从数据资源浏览器或概念模型浏览器中点击相应的数据对象，然后点击蓝色箭头按钮将数据对象插入到输入字段中。
flex的3行3例
flex的3行3例
Flex是一种CSS布局模式，它可以帮助我们更灵活地控制元素在容器中的布局和排列。
下面我会从多个角度全面地介绍Flex的3行3例。
1. Flex容器的属性：
`display: flex;`，将一个容器设置为Flex容器，使其内部的子元素可以使用Flex布局。
`flex-direction: row;`，设置Flex容器的主轴方向为水平方向，子元素将从左到右依次排列。
`justify-content: space-between;`，设置子元素在主轴上的对齐方式为两端对齐，子元素之间的间隔相等。
2. Flex子元素的属性：
`flex: 1;`，设置子元素的弹性伸缩比例为1，即所有子元素平分剩余空间。
`align-self: center;`，设置子元素在交叉轴上的对齐方式为居中对齐。
`order: 2;`，设置子元素的排列顺序为2，数值越小越靠前。
3. 响应式布局的应用：
使用媒体查询（`@media`）和Flex布局结合，可以实现响应式布局。
例如，在不同的屏幕尺寸下，可以通过改变Flex容器的`flex-direction`属性来调整子元素的排列方式。
可以利用Flex的弹性伸缩特性，根据屏幕尺寸的变化，自动调整子元素的宽度或高度，以适应不同的设备。
以上是关于Flex的3个例子，从Flex容器的属性、Flex子元素的属性以及响应式布局的应用三个角度进行了介绍。
希望能够对你有所帮助。
如有需要，请继续提问。
FLEX交互相关技术
FLEX数据传输与交互数据具有流动性，数据传输是指根据用户控制传递至指定目的地。
数据交互是指Flex与其他程序进行数据交换，包括传递数据给其他程序和接收其他程序返回的数据。
本章将详细讲解数据传输的各种方法及如何与其他程序进行交互。
21.1 数据传输的方式Flex 3.0中的数据传输方式包括内部数据传输、文件流方式传输、XML方式传输、其他方式传输。
应用程序内部的数据传输大多通过变量传递来实现。
外部文件的数据可分为简单文本数据、XML数据和复杂数据。
对于简单的文本数据可采用文件流方式传输。
对于XML数据可采用XML方式传输。
对于复杂的数据，如大型数据库中的数据，需要通过其他程序来辅助数据传输。
21.1.1 内部数据传输内部数据传输是指应用程序内部的数据流动，而变量传递是其中最常使用的传输方式。
对于同一文件或类中的变量可采用直接赋值的方式。
对于不同文件或类中的变量可采用公有变量的方式。
1．直接赋值方式直接赋值是指将一变量赋值给另一变量。
以下代码将变量b的值直接赋值给变量a。
var a:int,b:int=12;a=b;大部分情况下，使用“=”符将两变量连接起来就实现了变量传递，但有两种情况下需要特殊处理。
一种情况是两个变量的类型不相同，需要强制转换。
需要说明的是，若两个变量类型相近，编译器可自动转换。
例如，将int类型的变量赋值给Number类型变量时，编译器自动执行变量传递。
若两个变量类型相差甚远，如Object型与Array型，就需要强制转换。
Flex 3.0中数据类型强制转换的语法如下所示。
变量名 as 强制类型或者如下所示。
(强制类型)变量名以下代码将int类型强制转换为Number类型。
var s:Number=y as Number;var t:Number=(Number)y;另一种情况是特殊的变量类型，如Array等多维数据变量。
前面章节中详细介绍过数组变量。
为了节约变量空间，Array类型的变量并不存储全部数据，而是存储数组的首地址。
让Flex助力互动教学(上)
和Ａ ｔ ｎ ｃｉｔ ｃｉ Ｓ ｒ 编程 语 言都提 供 了访 ｏ ｐ
问 Ｆｅ ｇ 库的能力。 ｌ ￣ ｘ 通常 的做法是 ： 使 用ＭＸ 去定义用户界 面的元素， ＭＬ 使用 Ａ ｔ ｎ ｃｉ ｔ ｃｉ Ｓ ｒ 去定义 客户端 的逻 辑 并 ｏ ｐ
进行控制。
的有Ｉｏ ｌ ｉ Ｌ ｇ Ｅ ｘｒ ｉ 等。 ２ 矢量 图形 和ＡＰ 支持 。 Ｆ ｅ ． １ 使 ｌｘ 在 表 现 力 方 面有 别 于 其 他 软 件 的一 个 功能 是提 供 Байду номын сангаас量 图形。 过使 用矢 通
作 为新一代的富客户 端互联 网技
术的佼佼者， ｌ 这种技术已经被越来 Ｆｅ ｘ
其旗 下的Ｆａｈ ｌ 软件是强大的矢量动画 ｓ 编辑工具 ，１ ｈ Ｆａ 一直在谋 求Ｒ Ａ（ｉ Ｓ Ｉ Ｒｃ ｈ
越多的公司所采用， 被越来越 多的用户 和程 序员所接受 。 那么， 基于 Ｆｅ 的表 ｌｘ 现层 开发多媒体应用有哪些优点？
Ｃ Ｓ ／ 的不足， ／ 与Ｂ Ｓ 尤其在流媒 体等技
术应用方面大展 身手。 Ｍａ ｒｍｅ ｉ公司以做 动画起家 ， ｃｏ ｄａ
频 流 。 ｌｘ 被公认 为 流媒 体技 术支 Ｆｅ 是 持 最好的应用， 它与流媒体服务器 通过
Ｒ ＭＰ Ｔ 协议进 行通信， 在不下载完整文 件的情 况下， 对服务器上 面的媒体文件
１ ． 丰富的组件 。 ｌ 提 供了一整套 Ｆｅ ｘ
进行随机播放、 随机查询等操作， 同时它
还台 ｉ 口 Ｘ Ｓ 过 ｅ Ｄ（ 组件， 直接调用客户
ｉｔｍｅ ａ ｐ ｃＳ ｎ 富客户端 的霸主 ｎｅ ｔ ｐ Ｅａ ｏ ）
地位， 最有影响的是， 已经推出了面向对
象的编程 脚本Ａ ｔ ｎ ｃｉｔ． 并且建 ｃ ｏ Ｓｒ ３ ， ｉ ｐ ０ 立起类似 于Ｊｖ ｗｉｇ ａ ａ ｓ ｎ 的类库和相 应 Ｃ ｍｐ ｎ ｎ （ ｏ ｏｅ ｔ 组件 ） 。
html中Flex
html中Flex 布局⽅法```⼀、flex属性：1.flex-direction 值：row（默认值）：主轴为⽔平⽅向，起点在左端row-reverse：主轴为⽔平⽅向，起点在右端column：主轴为垂直⽅向，起点在上沿column-reverse：主轴为垂直⽅向，起点在下沿2.flex-wrap 值：nowrap（默认）：不换⾏wrap：换⾏，第⼀⾏在上⽅wrap-reverse：换⾏，第⼀⾏在下⽅3.flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap4.justify-content 值：flex-start（默认值）：左对齐flex-end：右对齐center：居中space-between：先两边贴边，在分配剩余的空间space-around：平分剩余空间5.align-items 值：排列⽅式单⾏flex-start：从上到下flex-end：从下到上center：挤在⼀起居中（(垂直居中)baseline: 项⽬的第⼀⾏⽂字的基线对齐stretch（默认值）：如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度6.align-content 值：排列⽅式多⾏flex-start：默认值在侧轴的头部开始排列flex-end：在侧轴的尾部开始排列center：在侧轴中间显⽰space-between：⼦项在侧轴先分布在两头，再平分剩余空间space-around：⼦项在侧轴平分剩余空间stretch（默认值）：设置⼦项元素⾼度平分⽗元素⾼度```。
Flex基础
Flex安装配置
解决创建的错误如下图
找到Problems看到有一个错误后肉我们右键选重新创 建HTML模板。这里错误已经解决，但是新的问题又 来了，src是java的源文件夹存java源代码的地方，但 是现在被 flex占用了
Flex安装配置
更改flex的项目源文件为flex_src,右键项目属性找到 flex构建路径的主源文件夹把src改为flex_src如下图
使用ActionScript
While和do while
while循环在循环开始前检查条件；如果循环开始条件 不成立，则不会执行 do while 在循环结束后检查条件,这就适合无论测试条 件是否 成立，都至少将部分代码运行一次。
使用ActionScript
条件语句（if和switch）
Flex安装配置
然后把src文件夹 里面的flexweb.mxml移动到flex_src 文件夹里面。最终目录如下图
（二）实现Flex与JAVA通信
实现Flex与JAVA通信
在src目录创建Java文件MyTest如下图
实现Flex与JAVA通信 配置WebRoot/WEB-INF/flex/remoting-config.xml 如下图
Flex的ActionScript支持两种主流注释形式：行内注释和多行注释 行内注释
行内注释以双斜杠开头，从双斜杠到当前行末尾之间的文本是一条 注释。换行意味着注释结束。
多行注释
如果想添加更多的注释用多行注释，多行注释的开始位置以斜杠加 星号(/*)标示。结束位置以星号加斜杠（*/）
很多时候不方便在MXML创建组件中 的定义事件，如组件是根据动 态 数据创建的，这些事件就需要使用Actionscript代码来动态的定义 事件。
Flex教程
//requiredFieldError属性表示必填项没填入数据的时的提示错误信息
//wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息
//invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息
//设置验证器
v.source = phoneInput;
v.property = "text";
}
]]>
</mx:Script>
<mx:TextInput id="phoneInput" creationComplete="createValidator();"/>
还可以加入按钮触发器，并修改默认提示错误//trigger:表示触发验证事件的对象
//在脚本中定义图片的scale-9像框缩放功能就可以保持边框的清晰,
(旋转嵌入的scale-9图像的实例会关闭该图像的scale-9功能[
[Embed(
source="assets/fancy_border.png",
scaleGridTop="55", scaleGridBottom="137",
downSkin: Embed("assets/box_new.png");
}
</mx:Style>
<mx:Button/>
3), SWFLoader控件:通常用来加入Flex应用程序(可以使用AS与其通信)，当然也能用于加入Image控件所能加入的富媒体资源。//外载入SWF程序
flex布局（弹性布局）
flex布局（弹性布局）1. 传统布局与 flex 布局⽐较 传统布局兼容性好布局繁琐局限性，不能在移动端很好的布局 flex 弹性布局操作⽅便，布局极为简单，移动端应⽤很⼴泛PC端浏览器⽀持较差IE 11 或更低版本，不⽀持或仅部分⽀持2. flex 布局原理 flex 是 flexible Box 的缩写，意为“弹性布局”，⽤来为盒状模型提供最⼤的灵活性，任何⼀个容器都可以指定为flex 布局。
当为⽗盒⼦设为 flex 布局之后，⼦元素的 float，clear 和 vertical-align 属性将失效伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局 采⽤ Flex 布局的元素，称为 Flex 容器，简称为“容器”。
它的所有⼦元素⾃动成为容器成员，成为 Flex 项⽬，简称“项⽬”。
体验中 div 就是 flex ⽗容器体验中 span 就是⼦容器 flex 项⽬⼦容器可以横向排列，也可以纵向排列 总结 flex 布局原理：就是通过给⽗盒⼦添加 flex 属性，来控制⼦盒⼦的位置和排列⽅式。
3. flex 布局⽗项常见属性flex-direction：设置主轴⽅向justify-content：设置主轴上的⼦元素排列⽅式flex-wrap：设置⼦元素是否换⾏align-items：设置侧轴上的⼦元素排列⽅式（单⾏）align-content：设置侧轴上⼦元素的排列⽅式（多⾏）flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap 1. flex-direction：设置主轴⽅向 在 flex 布局中，分为主轴和侧轴两个⽅向，同样叫法有⾏和列，x轴和 y 轴 默认主轴⽅向就是 x 轴⽅向，⽔平向右 默认侧轴⽅向就是 y 轴⽅向，⽔平向下 flex-direction 属性决定主轴的⽅向（即项⽬的排列⽅向） 注意：主轴和侧轴会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴，⽽我们的⼦元素是跟着主轴来排列的。
RIA与Flex的技术简介
第二部分
Flex的技术概览 Flex的技术概览
● Flex的前世今生 的前世今生
• Adobe公司的 公司的Flex 公司的 1、自从收购后，推出了Flex 2.0、Flex 2.0.1及Flex 3.0共三个版本。 2、自从Flex 2.X+以上包含的脚本语言是全新的ActionScript 3.0 3、ActionScript 3.0是完全的面向对象编程语言。 4、ActionScript 3.0官方说明的执行效率要比AS1、AS2高20~80倍。 5、 Flex 2.X+以上版本比Flex1.X时代提供了更加丰富的组件库。
● Flex文件构成 文件构成
.MXML程序文件，.as的AS文件，.css的样式表文件 程序文件， 的 文件 文件， 程序文件 的样式表文件
第二部分
Flex的技术概览 Flex的技术概览
● Flex 运行机制
Flex只是一种客户端技术，同时也属于Flash平台。Flex代码最终被 Flex只是一种客户端技术，同时也属于Flash平台。Flex代码最终被 Flash Flex 编译成SWF文件运行在Flash播放器（Flash Player）中。SWF文件 编译成SWF文件运行在Flash播放器（Flash Player）中。SWF文件 可以单独在用户终端运行，但是必须要安装Flash Player。也可以在 可以单独在用户终端运行，但是必须要安装Flash Player。也可以在 各种流行的浏览器中运行，浏览器必须安装Flash Player插件。 各种流行的浏览器中运行，浏览器必须安装Flash Player插件。 SWF文件是一个压缩文件，可以通过Flash Player呈现出来。由于 SWF文件是一个压缩文件，可以通过Flash Player呈现出来。由于 SWF文件很小，所以有很快的网络下载速度。用户要想运行一个Flex SWF文件很小，所以有很快的网络下载速度。用户要想运行一个Flex 应用程序，只需要通过网络或者其他途径获取SWF文件，就可以运行 应用程序，只需要通过网络或者其他途径获取SWF文件，就可以运行 在装有Flash Player插件的浏览器中。 在装有Flash Player插件的浏览器中。
flex语言
1.了解Flex在如今这个以用户为中心的时代，用户体验越来越重要，用户不仅要求应用要像C/S模式的应用那样具有良好的交互性，而且要求应用要像B/S模式的应用那样具有部署灵活和跨平台的优势。
RIA技术便是在这种需求下应运而生的，它同时具备B/S模式和C/S模式应用的双重优势，很好地满足了现代用户的需求Flex, Silverlight, JavaFx ,Html5四种语言：1. 必须支持Java作为后台语言，且能够与JSF/JSP开发的系统集成。
2. 必须有成功案例可以借鉴，成功案例多则优先考虑。
3. 有成熟的IDE，支持拖拽编程和跟踪调试。
如果能基于我们所熟悉的Eclipse集成开发环境，则会优先考虑。
能够满足这些要求的就只有FlexFlex是排版打印软件和图形渲染软件巨头Adobe公司在其著名的Flash平台（Flash Player）上，用ActionScript语言开发的一套RIA软件开发套件（SDK）及其集成开发环境。
开发人员可以将RIA程序编译成为Flash文件，为Flash Player所接受，也就是说，Flex技术所开发出来的程序对于大部分浏览者而言并不需要安装额外的客户端支持，这是一个得天独厚的优势。
2.语言及数据Flex程序以下三个文件组成：以css为后缀的样式表文件以mxml为后缀的程序文件以as为后缀的ActionScript文件2.1MxmlMXML语言是专门用于Flex程序中，描述界面表现的一种XML标记语言。
我们可以用它来管理程序的整体布局，控制组件的样式和外观，也可以构建非可视化的对象，比如XML数据，组件的数据源等。
MXML标签与ActionScript类或者类中的属性是相对应的。
当你编译你的Flex应用程序的时候，Flex解析你的MXML标签并且生成相应的ActionScript类。
然后这些ActionScript类会被编译成SWF字节码存储到一个SWF文件中。
Flex布局总结之flex的主要属性及参数用法
Flex布局总结之flex的主要属性及参数⽤法这篇笔记是系统学习flex时所记，适合复习使⽤，新⼿学习还是要配合图⽰和代码来学习更容易理解。
flex布局模型：弹性盒⼦（ Flexible Box 或 flexbox），是⼀种当页⾯需要适应不同的屏幕⼤⼩以及设备类型时确保元素拥有恰当的⾏为的布局⽅式。
引⼊弹性盒布局模型的⽬的是提供⼀种更加有效的⽅式来对⼀个容器中的⼦元素进⾏排列、对齐和分配空⽩空间。
⾸先要弄清楚⼏个重要概念：flex-container：弹性盒⼦容器flex-items：flex-container⾥⾯的直接⼦元素叫做flex-items主轴：main axis：main start & main end & main size交叉轴：cross axis：cross start & cross end & cross size⽤在flex container上的CSS属性：flex-flow、flex-direction、flex--wrap、justify-content、align-items、align-content应⽤在flex items上的CSS属性：flex、flex-grow、flex-basis、flex-sshrink、order、align-self开启flex布局：.box { display:flex or inline-flex; } // 块级元素或⾏内元素1. flex-direction ：决定了main axis主轴⽅向，默认沿着main axis主轴从main start开始从main start开始往main end⽅向排布。
row---默认从左⾄右, row-reverse----从右⾄左, column----从上⾄下, column-reverse----从下⾄上2. justify-content：决定了flex items在主轴上的对齐⽅式flex-start-----默认与main start对齐， flex-end------与main end对齐， center-------居中对齐space-between-----两边对齐中间等分间距对齐， space-evenly-----等分间距对齐， space-around-----边距时中间距离⼀半3. align-items：决定了flex items在cross axis上的对齐⽅式normal------效果相当于stretch-----当flex items在cross axis⽅向的size为auto时，会⾃动拉伸⾄填充flex containerflex-start----默认与cross start对齐， flex-end------与cross-end对齐， center------居中对齐， baseline------基线对齐，第⼀⾏⽂本底部为基线4. flex-wrap：默认nowrap，不换⾏；wrap，换⾏。
flex的用法
flex的用法
Flex是一个强大的CSS布局工具，它提供了更简单和更灵活的方法来管理HTML元素的布局。
以下是Flex的常用用法：
1. 将元素排列成一行或一列：设置元素容器（如div）的display属性为flex即可。
容器内的子元素将默认排列成一行，可以设置flex-direction属性来改变布局方向，改成列排列。
2. 设置元素的相对大小与位置：设置元素容器的justify-content和align-items属性，分别控制子元素沿着容器轴线（水平或垂直）的位置和大小。
3. 调整元素之间的间距：设置元素容器的gap属性，控制子元素之间的间距，类似于margin但更灵活。
4. 设置弹性盒子的弹性：设置元素容器或子元素的flex属性，表示元素占据父容器或同级子元素的比例。
可以设置为一个数字代表占比，也可以设置为auto代表按元素大小和内容自适应。
5. 实现响应式布局：通过设置元素容器或子元素的flex-wrap 属性控制是否换行，同时利用媒体查询@media设置不同的布局方式，以适应不同设备大小的屏幕。
总之，Flex的用法非常灵活，适用于各种网页布局需求。
flex 排列方式
flex 排列方式Flex是CSS3中的一种新的布局方式，主要用于对盒状模型的排列和对齐进行控制。
Flex 排列方式主要包括以下几种：1.主轴方向（flex-direction）：确定flex容器内部排列元素的主轴方向。
可选值包括row（水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）和column-reverse（垂直从下到上）。
2.换行（flex-wrap）：指定flex容器内部的元素是否可以换行。
可选值包括nowrap（不换行）、wrap（换行）、wrap-reverse（反向换行）。
3.主轴对齐（justify-content）：用于控制flex容器内部元素在主轴方向上的对齐方式。
可选值包括flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，元素之间的间距相等）和space-around（元素周围留有间距）。
4.交叉轴对齐（align-items）：用于控制flex容器内部元素在交叉轴方向上的对齐方式。
可选值包括flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、baseline （基线对齐）和stretch（拉伸对齐）。
5.元素自身对齐（align-self）：用于控制flex容器内部单个元素在交叉轴方向上的对齐方式。
可选值与align-items相同。
6.元素排序（order）：用于控制flex容器内部元素的排序。
数值越小的元素越靠前显示。
总之，通过这些属性的不同组合，可以灵活地控制flex容器内部元素的排列方式和对齐方式，使得页面布局更加灵活和高效。