了解FLEX所有的包
flex布局学习总结--阮一峰
flex布局学习总结--阮⼀峰基本概念:采⽤ Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有⼦元素⾃动成为容器成员，称为 Flex 项⽬（flex item），简称"项容器默认存在两根轴：⽔平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项⽬默认沿主轴排列。
单个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的属性:以下6个属性设置在容器上。
主轴:默认X交叉轴:默认Yflex-direction//排列⽅向.box {flex-direction: row | row-reverse | column | column-reverse;}* row（默认值）：主轴为⽔平⽅向，起点在左端。
* row-reverse：主轴为⽔平⽅向，起点在右端。
* column：主轴为垂直⽅向，起点在上沿。
* column-reverse：主轴为垂直⽅向，起点在下沿。
flex-wrap //flex-wrap属性定义，如果⼀条轴线排不下，如何换⾏.box{flex-wrap: nowrap 不换⾏| wrap 换⾏第⼀⾏在上⽅| wrap-reverse 换⾏第⼀⾏在下⽅;}flex-flow//是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {flex-flow: <flex-direction> || <flex-wrap>;}justify-content//定义了项⽬在主轴上的对齐⽅式。
.box {justify-content: flex-start | flex-end | center | space-between | space-around;}flex-start（默认值）：左对齐flex-end：右对齐center：居中space-between：两端对齐，项⽬之间的间隔都相等。
Flex从入门到精通 第24章
24.1.2 序列类，坐标轴类和图表事件
序列类（Series Class）用来定义什么数据要在图表控件 中显示。所有的序列类都是 mx.charts.chartClasses.Series类的子类。每种图表类型 都有自己特有的序列类。例如条形图表控件就有相应的 BarSeries类来为BarChart控件定义数据。 一个序列的首要目的是定义在图表中显示的数据。使用序 列定义在数据源中的哪一部分应该用来显示图表X、Y轴上 的数据。它使用xField和yField属性来定义。每个序列都 有一组序列项目组成的。当建立一个新的序列时，就定义 displayName属性，此属性显示其序列，例如数据提示。通 常图表只定义一种序列，编程者也可以使用第二个序列。
24.1 图表组件概览
一个简单的图表表达了一个单个的数据序列。一 个序列是一系列的相关的数据点。例如，一个数 据序列可以是一个年度报告中的月销售额，或者 酒店每日的入住率。这些数据都由在二维象限的 图形，更直接，清晰的表现出来。
24.1.1 使用图表组件
Flex提供了大量的控件来显示图表。 除了饼图表之外的图表控件都是CartesianChart 类的子类。笛卡尔（Cartesian）图表是指在一个 方形的区域，二维象限的空间来表现一组数据。 饼图表是PolarChart类的子类，极面（Polar）图 表在一个圆形的区域显示数据。
BubbleChart控件每个数据点都显示了三项数据： 一个定义x坐标位置的值；一个定义y坐标位置的 值；一个定义图表符号相对于其它数据点大小的 值。使用BubbleSeries图表序列来定义 BubbleChart控件的数据。
24.2.4 蜡烛图表（Candlestick Chart）示例 CandlestickChart控件显示了金融数据为一系列 蜡烛图，以体现其高，低，开和关的数值。每个 蜡烛图垂直线上的上顶和下底代表了每个数据点 高和低的数据值，填充盒子的上顶和下底代表开 放和关闭的数值。基于每个数据点关闭的数值相 对开发的数值是高，还是低，每个蜡烛图就被不 同方式填充。 CandlestickChart控件的CandlestickSeries需要 所有四项数据：高，低，开，关。
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 单元多行单元上下间距摘要：1.Flex 单元的概念与特点2.多行单元的定义与应用场景3.多行单元的上下间距调整方法4.Flex 单元在实际开发中的应用案例正文：【1.Flex 单元的概念与特点】Flex 是一种用于构建灵活布局的方式，它可以轻松地实现响应式设计，使得在不同设备上的页面布局都能自适应。
Flex 是CSS3 引入的一个模块，它包括了Flex 容器（container）、Flex 项目（item）和Flex 轴（axis）等概念。
Flex 单元是指在一个Flex 容器中，被Flex 布局所影响的元素。
Flex 单元具有以下特点：- Flex 单元会在主轴（水平轴）和交叉轴（垂直轴）上自动对齐，以保持布局的整洁。
- Flex 单元之间会自动插入间隔，以避免重叠。
- Flex 单元的大小可以根据容器的大小自动调整，以适应不同的屏幕尺寸。
【2.多行单元的定义与应用场景】多行单元是指在一个Flex 容器中，可以自动换行显示的元素。
多行单元通常用于实现垂直导航栏、卡片布局等场景。
在Flex 布局中，可以使用flex-wrap 属性来控制多行单元是否换行。
【3.多行单元的上下间距调整方法】要调整Flex 单元中多行单元的上下间距，可以使用以下方法：- 使用flex-grow 属性，设置多行单元在主轴方向上的放大比例。
默认值为0，表示多行单元不会放大。
如果设置为1，则多行单元会占据整个容器的高度。
- 使用align-self 属性，允许单个Flex 项目有与其他Flex 项目不一样的对齐方式。
将align-self 设置为flex-start 或flex-end，可以控制多行单元在容器顶部或底部对齐。
- 使用margin 属性，为多行单元设置上下的外边距。
这可以在一定程度上调整多行单元之间的间距。
【4.Flex 单元在实际开发中的应用案例】假设我们要为一个电商平台设计一个商品列表页面，其中每个商品都是一个Flex 单元。
Orcaflex 基础介绍
第十三页，共三十九页。
模型(móxíng)单元（
Link）
本身不具备质量(zhìliàng)和水动力属性，用于 连接任意的两个点，并传递拉力/压力，常用于模
拟钢丝绳
第十四页，共三十九页。
模型(móxíng)单元（Link）
Type
Tether Spring/Damper
第十五页，共三十九页。
Line type Chain
Rope/wire Line with floats
Homogeneous pipe Hose
Umbilical
第十页，共三十九页。
Line 定义(dìngyì)
Connection ( End A & End B)
End connection
End position End orientation End release
Orcina公司简介
Orcaflex软件(ruǎn jiàn)介绍 软件主界面 模型单元（line）
实例演示
模型单元 （link、wiliúchéng)介绍
实例演示
3
第三页，共三十九页。
企业背景
成立于1986年，公司位于英国Ulverston，主要提供海洋工程结构及水动力项目 咨询
同类型的软件：
1. Flexcom (MCS, Ireland) 2. Deeplines (Principia, France)
3. Riflex (DNV/Marintek, Norway)
Flexcom 是全球范围主要竞争者。 Deeplines 和 Riflex 主要在法国和挪威地区。 OrcaFlex 和 Flexcom约占海洋工程线动力(dònglì)分析市场80%的份额 OrcaFlex在全球的市场份额约是Flexcom的2.5倍
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: 主轴为垂直⽅向，起点在下沿。
flex 语法
flex 语法Flex（也称为Lex）是一种用于生成扫描器或词法分析器的工具。
扫描器是编译器中的一个非常重要的组件，用于将源代码分割成一系列单词（token）或词素（lexeme）。
Flex 的语法非常简单，它使用一种称为正则表达式的模式匹配机制，将输入流中的字符序列与预定义的模式进行匹配，每次匹配成功之后就执行相关的操作。
Flex的基本语法由三部分组成：声明区、规则区和操作区。
1. 声明区声明区主要用于声明常量和数据类型，以及包含需要调用的外部库函数。
Flex中常见的声明有：%{// 声明区代码%}%option noyywrap%option yylineno%option yyheader-file="lexer.h"%option outfile="lexer.c"%option prefix="yy"其中 %{ 和 %} 用于包裹声明区的代码，%option 用于设置Flex的选项，如关闭yywrap、开启自动行号等。
%option 有很多参数，这里只列举了几个常用的。
%option outfile 将生成的词法分析器输出到指定文件，%option prefix 设置词法分析器的前缀为"yy"，这样就可以避免与其他程序中的同名函数造成冲突。
2. 规则区规则区主要用于定义词法分析器的规则，即用正则表达式表示输入序列中的模式，并指定每种模式匹配成功之后的动作，常见的规则声明形式如下：pattern1 action1pattern2 action2pattern3 action3其中 pattern 表示用于匹配输入字符序列的正则表达式模式，action 表示模式匹配成功之后所执行的操作，可以是任意C语言代码（包括函数调用、赋值操作、条件分支、循环等）。
Flex中支持的正则表达式元字符有：.任意字符；[] 表示一个字符集，如 [abc] 表示匹配字符 a、b、c 中任意一个；() 表示一个子模式；| 表示或关系，如 pattern1|pattern2 表示匹配 pattern1 或 pattern2；+ 表示至少匹配一次；表示可选，即出现 0 次或 1 次；* 表示匹配 0 次或多次；\ 转义字符。
Flex学习大全
1.1 Flex可视化组件开发-1
mx.,collections.ICollectionView接口和mx.collections.IList接口 2.3.2 Flex集合类特征
2.3.2.1 确保数据源更改后数据及时更新. 2.3.2.2 提供了运行远程数据源的分页机制. 2.3.2.3 提供了数据源中的数据操作，可以通过index修改数据源中的数据,而不用关心数据源的具体实现，如 Array和XML 2.3.2.4 支持单独数据集合作为多个可视化组件的数据源.(一个ArrayCollection可以显示在多个组件中); 2.3.2.5 使用集合类的方法可以访问数据源中的数据.(如，可以访问sql,mysql,db2,oralce,access,sybase) 2.3.3 Flex可视化组件均支持dataProvider属性: 2.3.3.1 例：
1.1 Flex可视化组件开发-1
2.5 容器组件，可视化组件的结合形式 <mx:Application xmlns:mx="/2006/mxml" layout="absolute">
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Accessibility flash.accessibility Accessibility 类管理与屏幕阅读器之间的通信。
AccessibilityProperties flash.accessibility利用AccessibilityProperties 类可控制Flash 对象辅助功能（如屏幕阅读器）演示。
AccImpl fl.accessibility AccImpl 类（也称为Accessibility Implementation 类）是用于在组件中实现辅助功能的基类。
ActionScriptVersion flash.display ActionScriptVersion 类是表示已加载SWF 文件的语言版本的常量值枚举。
ActivityEvent flash.events每次摄像头或麦克风报告其变为活动或非活动状态时，Camera 或Microphone 对象即会调度ActivityEvent 对象。
AdjustColor fl.motion AdjustColor 类定义不同的颜色属性（例如brightness、contrast、hue 和saturation），以便支持ColorMatrixFilter 类。
Animator fl.motion Animator 类将补间动画的XML 说明应用于显示对象。
Animator3D fl.motion Animator3D 类将三维补间动画的XML 说明应用于显示对象。
AnimatorBase fl.motion AnimatorBase 类将补间动画的XML 说明应用于显示对象。
AnimatorFactory fl.motion AnimatorFactory 类提供基于ActionScript 的支持，以将一个Motion 对象与多个显示对象相关联。
AnimatorFactory3D fl.motion AnimatorFactory3D 类提供基于ActionScript 的支持，以将一个包含三维属性的Motion 对象与多个显示对象相关联。
AnimatorFactoryBase fl.motion AnimatorFactoryBase 类提供基于ActionScript 的支持，以在运行时显示多个目标对象并用一个Motion 动态地对它们进行补间。
AntiAliasType flash.text AntiAliasType 类为flash.text.TextField 类中的消除锯齿提供值。
ApplicationDomain flash.system ApplicationDomain 类是分散的类定义组的一个容器。
ApplicationUpdater air.update ApplicationUpdater 类定义Adobe® AIR™应用程序更新框架的基本功能，但不提供任何默认的用户界面。
ApplicationUpdaterUIair.update ApplicationUpdaterUI 类定义Adobe® AIR™应用程序更新框架的基本功能，并提供默认的用户界面。
ArgumentError顶级ArgumentError 类表示一种错误，如果函数提供的参数与为该函数定义的参数不一致，则会出现该错误。
arguments顶级用于存储和访问函数参数的参数对象。
Array顶级使用Array 类可以访问和操作数组。
AsyncErrorEvent flash.events在从本机异步代码中引发异常时（例如，可能从LocalConnection、NetConnection、SharedObject 或NetStream 引发），对象将调度AsyncErrorEvent。
AuthenticationMethod.drm AuthenticationMethod 类提供一些字符串常量，用于枚举DRMContentData 类的authenticationMethod 属性所使用的各种类型的身份验证。
AutoLayoutEvent fl.video Flash® Player 在自动调整视频播放器大小和布置视频播放器时调度AutoLayoutEvent 对象。
AVM1Movie flash.display AVM1Movie 是表示使用ActionScript 1.0 或2.0 的AVM1 影片剪辑的简单类。
Back fl.motion.easing Back 类可以定义三个缓动函数，以便实现具有ActionScript 动画的运动。
Back fl.transitions.easing Back 类可以定义三个缓动函数，以便实现具有ActionScript 动画的运动。
BaseButton fl.controls BaseButton 类是所有按钮组件的基类，用于定义所有按钮的通用属性和方法。
BaseScrollPane fl.containers BaseScrollPane 类处理基本的滚动窗格功能，包括事件、样式、绘制遮罩和背景、滚动条的布局以及滚动位置的处理。
BevelFilter flash.filters可使用BevelFilter 类对显示对象添加斜角效果。
BezierEase fl.motion BezierEase 类为两个关键帧之间的补间动画提供精确的缓动控件。
BezierSegment fl.motion一个贝塞尔曲线段包含四个Point 对象，这些对象定义一个三次贝塞尔曲线。
Bitmap flash.display Bitmap 类表示用于表示位图图像的显示对象。
BitmapData flash.display使用BitmapData 类可以处理Bitmap 对象的位图图像的数据（像素）。
BitmapDataChannel flash.display BitmapDataChannel 类是常量值枚举，指示要使用的通道：红色通道、蓝色通道、绿色通道或Alpha 透明度通道。
BitmapFilter flash.filters BitmapFilter 类是所有图像滤镜效果的基类。
BitmapFilterQuality flash.filters BitmapFilterQuality 类中包含的值用于设置BitmapFilter 对象的呈现品质。
BitmapFilterType flash.filters BitmapFilterType 类中包含的值可用于设置BitmapFilter 的类型。
BlendMode flash.display提供混合模式可视效果的常量值的类。
Blinds fl.transitions Blinds 类使用逐渐消失或逐渐出现的矩形来显示影片剪辑对象。
BlurFilter flash.filters可使用BlurFilter 类将模糊视觉效果应用于显示对象。
Boolean顶级Boolean 对象是一种数据类型，其值为true 或false（用于进行逻辑运算）。
Bounce fl.motion.easing Bounce 类可以定义三个缓动函数，以便实现具有ActionScript 动画的跳动，类似一个球落向地板又弹起后，几次逐渐减小的回弹运动。
Bounce fl.transitions.easing Bounce 类可以定义三个缓动函数，以便实现具有ActionScript 动画的跳动，类似一个球落向地板又弹起后，几次逐渐减小的回弹运动。
BreakOpportunity flash.text.engine BreakOpportunity 类是可用于设置ElementFormat 类的breakOpportunity 属性的常量值的枚举。
BrowserInvokeEventflash.events当由于浏览器中的SWF 文件而使用浏览器调用功能调用AIR 应用程序时，该应用程序的NativeApplication 对象将调度browserInvoke 事件。
Button fl.controls Button 组件表示常用的矩形按钮。
ButtonAccImpl fl.accessibility ButtonAccImpl 类（也称为Button Accessibility Implementation 类）可实现Button 组件与屏幕读取器之间的通信。
ButtonLabelPlacement fl.controls ButtonLabelPlacement 类可定义Button、CheckBox 或RadioButton 组件的labelPlacement 属性值的常量。
ByteArray flash.utils ByteArray 类提供用于优化读取、写入以及处理二进制数据的方法和属性。
Camera flash.media使用Camera 类可从连接到运行Flash Player 的计算机的摄像头中捕获视频。
Capabilities flash.system Capabilities 类提供一些属性，这些属性描述了承载SWF 文件的系统和播放器。
CapsStyle flash.display CapsStyle 类是可指定在绘制线条中使用的端点样式的常量值枚举。
CaptionChangeEvent fl.video每当添加字幕或从字幕目标文本字段中删除字幕时调度CaptionChangeEvent。
CaptionTargetEvent fl.video自动创建captionTargetCreated 事件后，在向其添加任何字幕前，调度的captionTargetCreated 事件的类型。
CellRenderer fl.controls.listClassesCellRenderer 类定义基于列表的组件的方法和属性，以用来处理和显示每一行的自定义单元格内容。
CFFHinting flash.text.engine CFFHinting 类为FontDescription 类中的CFF 提示定义值。
CheckBox fl.controls CheckBox 组件显示一个小方框，该方框内可以有选中标记。
CheckBoxAccImpl fl.accessibility CheckBoxAccImpl 类（也称为CheckBox Accessibility Implementation 类）用于使CheckBox 组件具备辅助功能。
Circular fl.motion.easing Circular 类可以定义三个缓动函数，以便实现具有ActionScript 动画的运动。
Class顶级为程序中的每个类定义创建一个Class 对象。