`

flex 4 布局示例一

    博客分类:
  • Flex
阅读更多

flex4(flex skd4)的布局发生了很大变化,在flex3中有vbox或hbox等,在flex4中使用 layout 中的 VerticalLayout 或 HorizontalLayout 设置,并且外部要包group。

 

代码:两个group

<s:Panel x="40" y="18" width="321" height="260">

		<s:Scroller width="100%" height="100%">

			<s:Group x="10" y="12" width="100%" height="100%" id="group1">

				<s:layout>

					<s:VerticalLayout useVirtualLayout="true"/>

				</s:layout>

				<s:TextInput/>

				<s:Button label="按钮"/>

				<s:Group width="200" height="200" x="170" y="111">

					<s:layout>

						<s:HorizontalLayout useVirtualLayout="true"/>

					</s:layout>

					<s:Button label="按钮"/>

					<mx:DateChooser width="149" height="172"/>

				</s:Group>

				

			</s:Group>

			

		</s:Scroller>

	</s:Panel>

 

效果:

 效果

分享到:
评论

相关推荐

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

    在这个"微信小程序+Flex布局示例源代码"中,我们将深入探讨Flex布局在微信小程序中的应用。 Flex布局,全称为Flexible Box布局,是CSS3中的一种新的布局模式,旨在解决传统盒模型在处理复杂或响应式布局时的困难。...

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

    在前端开发中,Flex布局(Flexible Box)是一种强大的盒模型布局方式,允许开发者轻松地创建响应式和动态的用户界面。这个"基本布局_flex基本布局模板_flex_"项目旨在介绍和提供一个基础的Flex布局模板,帮助开发者...

    微信小程序-FlexLayout布局源码示例

    1. Flex布局(Flexible Box)是CSS3引入的一种新的布局模式,旨在解决传统的块级布局和行内布局在处理动态内容和响应式设计时的局限性。 2. Flex容器:设置`display: flex`或`display: inline-flex`的元素成为Flex...

    flex布局实战搭建网页页面

    在提供的压缩包文件中,你将找到一个名为“flex布局自创网页页面(可做网页作业)”的示例,包含了完整的HTML和CSS代码。你可以参考这个例子来进一步学习和实践Flex布局,逐步掌握这项强大的网页设计技术。

    弹性布局-flex布局.zip

    在`移动web开发_flex布局.md`文件中,可能包含了具体的代码示例,包括HTML结构和CSS样式,演示了如何应用Flex布局创建各种移动Web界面。`images`目录下的图片可能用于辅助说明布局效果,而`2-案例`可能包含更多复杂...

    Flex 布局变化时的动画效果解析 简单版

    然而,由于提供的信息仅包含一个SWF文件“Play.swf”,这可能是一个示例程序或互动教程,用于演示Flex布局动画的实际效果。SWF是Adobe Flash的文件格式,通常用于展示交互式内容,包括动画和小游戏。要查看和理解这...

    Flex超炫布局 和win7的效果一样

    在本示例中,提供的"CoverFlow"可能是实现CoverFlow布局的一个组件或示例项目。导入IDE后,开发者可以查看源代码,了解如何将这些技术应用到实际项目中。这可能包括XML配置文件(通常是.mxml)、ActionScript类文件...

    flex仪表盘示例代码

    在本示例中,"flex仪表盘示例代码"是使用Flex技术实现的一个可视化工具,用于展示各种数据指标,其设计风格具有吸引力,采用了漂亮的渐变半透明效果,增强了视觉体验。 仪表盘控件在数据可视化领域中扮演着重要角色...

    前端-flex布局案例

    1. **Flex布局的基本概念** Flex布局是CSS3引入的一种新的布局模式,它允许容器对其内部元素进行更灵活的排列和对齐,以适应不同屏幕尺寸和设备类型。相比于传统的盒模型布局(如块级布局和流式布局),Flex布局...

    小程序源码FlexLayout布局.zip

    在解压后的“FlexLayout布局”文件中,你可能会找到示例代码和说明文档,这些资源可以帮助你深入理解Flex布局在小程序中的应用。通过查看和分析这些源码,你可以学习到如何设置容器和子元素的样式,以及如何根据实际...

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

    本实例聚焦于使用Flex布局进行移动Web开发,通过具体的源码分析,我们可以深入理解并掌握这一强大的CSS布局模式。 1. Flex布局基础: Flex布局允许开发者轻松地调整元素的大小和位置,以适应不同屏幕尺寸和设备...

    flex 图形开发示例

    1. **Flex框架**:Flex是Adobe公司开发的一个开源框架,基于ActionScript编程语言和MXML标记语言,用于创建交互式的、基于Flash的RIA。它提供了丰富的UI组件库和数据绑定机制,使得开发者能轻松构建用户界面。 2. *...

    【移动端网页布局】Flex 弹性布局案例 ③

    1. 容器(Container):Flex布局中的容器是指设置了`display: flex`或`display: inline-flex`的元素,它是弹性布局的主体,包含了一系列的子元素(项目,Items)。 2. 项目(Items):容器内的所有直接子元素都被视...

    Flex弹性布局详解

    2009年,W3C提出了Flex布局规范,这是一种用于创建可伸缩和响应式用户界面的新方法。Flex布局能够使开发者更轻松地创建复杂布局,而无需依赖于传统的浮动或定位技术。 #### 二、基本概念 Flex布局的核心在于定义了...

    页面代码布局示例

    页面布局代码,页面代码布局示例页面代码布局示例页面代码布局示例页面代码布局示例

    一些关于flex的示例网站

    总之,“一些关于flex的示例网站”覆盖了从Flex框架的基础到高级应用,再到CSS Flex布局的多个维度,为不同阶段的学习者提供了宝贵的资源。无论是新手还是有经验的开发者,都能从中找到提升技能的关键知识点和实用...

    flex3 分页示例

    Flex3是一种基于ActionScript3的开源框架,用于构建富互联网应用程序(RIA)。它提供了一整套组件库,包括用户界面元素、数据绑定和图形绘制工具,使得开发者可以创建交互性强、视觉效果丰富的Web应用。在Flex3中...

    源代码:网站制作FlexLayout布局.rar

    1. **主轴与侧轴**:Flex布局中有两个主要的方向概念——主轴(flex-direction)和侧轴(flex-wrap)。默认情况下,主轴是水平方向(从左到右),侧轴是垂直方向(从上到下)。通过改变flex-direction的值(row、row...

    css3_flex使用示例

    本资源“css3_flex使用示例”包含了一些关于CSS3 Flexbox的实际应用案例,帮助开发者深入理解和掌握这一强大的布局工具。 1. **Flex容器与项目** - **flex容器**:设置`display`属性为`flex`或`inline-flex`的元素...

    Flex4开发实践PPT

    Flex4,全称为Adobe Flex 4,是Adobe公司推出的一款强大的富互联网应用程序(RIA)开发框架,主要用于构建具有丰富用户体验的Web应用。本PPT详细讲述了Flex4的开发实践,旨在帮助开发者从基础到实践全面掌握这一技术...

Global site tag (gtag.js) - Google Analytics