`
flying188
  • 浏览: 16773 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

解析八大Flex布局规则

阅读更多

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布局会发现,当水平排列后,会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认: 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽,并把所有子项的高度变为最高子项的...

    CSS的flex布局.ppt

    网页布局(layout)是CSS的一个重点应用。... 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

    Flex布局之关于组件的大小

    Flex布局之关于组件的大小 Flex布局之关于组件的大小

    Flex 布局教程

    Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程

    携程网站 移动端 Flex布局

    携程网站 移动端 Flex布局,新人可以利用此资源来学习flex布局的应用 Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...

    小程序源码 FlexLayout布局 (代码+截图)

    小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 Flex...

    flex布局.html

    flex布局.html

    Flex布局学习资料

    Flex布局学习资料,2018年整理的不错的Flex布局学习教程

    Flex布局.xmind

    Flex布局.xmind

    flex布局实战搭建网页页面

    html+css,使用flex布局搭建页面,纯前端,初学党可借鉴学习如何使用flex布局页面

    flex布局--顶部/底部固定

    flex布局实现顶部导航,底部导航固定,内容区内容高度超过可展示区域时出现滚动条,内容高度不足时铺满屏幕。

    flex布局分享.pptx

    flex布局培训PPT,适用于H5,小程序,ReactNative,Flutter的布局教程。

    微信小程序+Flex布局示例源代码

    微信小程序,Flex布局示例源代码,包括横向布局,纵向布局,基本涵盖了Flex布局的知识点,有相关的页面布局需求,可以直接拿来使用。

    基本布局_flex基本布局模板_flex_

    可以实现flex布局的基本功能,flex的基本布局模板

    Flex布局笔记.docx

    关于Flex布局的笔记整理,能够详细理解Flex布局原理和用法,仅供自己学习。

    flex布局布局篇

    高清非扫描版本,特别适合放在kindle中看,非常好适合初始上手快

    CSS3样式表-定位之Flex布局.pptx

    单元二 CSS3样式表端基础前Web单元2-7 定位之Flex布局2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用...

    移动web开发实例flex布局案例源码

    移动web开发实例flex布局案例源码

    flex布局实例DOM

    参照阮一峰flex布局,以及实例DOM,做了部分修改,可以选择属性值看效果,方便理解

    微信小程序flex布局demo

    微信小程序flex布局demo

Global site tag (gtag.js) - Google Analytics