Flex布局规则
1)VBox
子元素沿垂直方向排列;每个子元素都绘制在前一标签的下方
(2)HBox
子元素沿水平方向排列;每个子元素都绘制在前一标签的右方
(3)Canvas
Flex布局规则中按开发者指定的x坐标和y坐标绘制子元素。如果没有指定坐标,则所有的子元素都绘制在容器的左上角。例如,如果在Canvas容
器中添加一个Button控件而不给Button控件指定x坐标和y坐标,那么按钮会被呈现在Canvas的左上角,位于默认的(0,0)位置。
(4)Application
通过使用Layout属性,Application布局能设置成类似VBox、HBox或Canvas容器之中的任何一种方式
(5)Tile
将其子元素排成一个或多个竖列或横行,在需要时增加新行或新列。所有的Tile容器单元格大小都相同。Flex将Tile容器的单元格排在正方形网格中,每一个单元格内放入一个子元素。布局方式由direction属性决定。
(6)Panel
Flex布局规则中Box容器的子类,Panel容器可以像VBox、HBox或Canvas容器之中的任何一种那样布局,这取决于指定的
Layout属性(默认使用layout="absolute",布局行为与Canvas容器一样)。除了可以包含子元素,Panel容器还白日做梦了标
题栏区域,可以包含它的标题和状态信息。
(7)ControlBar
ControlBar容器可用于将工具栏停靠在Panel容器或TitleWindow容器的底部。ControlBar容器能以HBox容器或VBox容器的方式布局,这取决于direction属性(默认值是horizontal)
(8)ApplicationControlBar
ApplicationControlBar容器用于放置在整个应用程序中均能访问的组件。如果ApplicationControlBar容器
是<mx:Application>标签的第一个子元素,且dock属性为true,刚ApplicationControlBar容器会停
靠在应用程序绘制区域的顶部,占满应用程序的最大宽度,而且不能随应用程序滚动而滚动。ApplicationControlBar容器能以HBox容器
或VBox容器的方式布局,这取决于direction属性(默认值是horizontal)
分享到:
相关推荐
在用了Flex布局会发现,当水平排列后,会发现所有子项的高度都变成一样的了。 这是因为Flex 布局会默认: 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽,并把所有子项的高度变为最高子项的...
网页布局(layout)是CSS的一个重点应用。... 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
Flex布局之关于组件的大小 Flex布局之关于组件的大小
Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
携程网站 移动端 Flex布局,新人可以利用此资源来学习flex布局的应用 Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 Flex...
flex布局.html
Flex布局学习资料,2018年整理的不错的Flex布局学习教程
Flex布局.xmind
html+css,使用flex布局搭建页面,纯前端,初学党可借鉴学习如何使用flex布局页面
flex布局实现顶部导航,底部导航固定,内容区内容高度超过可展示区域时出现滚动条,内容高度不足时铺满屏幕。
flex布局培训PPT,适用于H5,小程序,ReactNative,Flutter的布局教程。
微信小程序,Flex布局示例源代码,包括横向布局,纵向布局,基本涵盖了Flex布局的知识点,有相关的页面布局需求,可以直接拿来使用。
可以实现flex布局的基本功能,flex的基本布局模板
关于Flex布局的笔记整理,能够详细理解Flex布局原理和用法,仅供自己学习。
高清非扫描版本,特别适合放在kindle中看,非常好适合初始上手快
单元二 CSS3样式表端基础前Web单元2-7 定位之Flex布局2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用...
移动web开发实例flex布局案例源码
参照阮一峰flex布局,以及实例DOM,做了部分修改,可以选择属性值看效果,方便理解
微信小程序flex布局demo